iOS中如何操作HTML5界面（DOM操作）

在应用开发中，常常会嵌入HTML5界面，一般的需求都是直接使用WebView的代理方法做跳转操作。但是有时候我们需要操作HTML5界面的时候该怎么办呢？
比如: 修改百度首页的搜索按钮，修改他的点击事件...效果图如下

代码示例

DOM操作前先加载百度界面

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.webView.delegate = self;
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
}

DOM操作均在代理方法- (void)webViewDidFinishLoad:(UIWebView *)webView中实现
第一步：获取网页body并输出查看为了后续查找相应对象的id或者class

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *bodyString = @"document.body.outerHTML";
    NSString *body = [webView  stringByEvaluatingJavaScriptFromString:bodyString];
    NSLog(@"%@",body);
 }

第二步：找到相应对象

• 通过id获取

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *btn = @"var btn = document.getElementById('index-bn');" ;
    [webView  stringByEvaluatingJavaScriptFromString:btn];
}

• 通过class获取

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *button = @"var change = document.getElementsByClassName('change')[0];"
    [webView stringByEvaluatingJavaScriptFromString:button];*/
}

**第三步： **更改对象属性文字、大小、背景颜色、点击事件

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *attr = @ "btn.innerHTML = '我也想百度一下';"
                      "btn.style.height = '200px';"
                      "btn.style.background = 'black';"
                      "btn.onclick = function(){location.href = 'lyon://name_number_?&10086';}";
                      //"btn.addEventListener('click',function(){location.href = 'lyon://name_number_?&10086';})";
    [webView  stringByEvaluatingJavaScriptFromString:attr];
}

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSLog(@"%@",request.URL);
  
    return YES;
}

第四步：删除对象

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *remove = @"btn.remove();";
    [webView  stringByEvaluatingJavaScriptFromString:remove];
}

第五步：插入对象

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *str4 =@"var img = document.createElement('img');"
                     "img.src = 'img_01.jpg';"
                     "img.width = '160';"
                     "img.height = '200';"
                     "document.body.appendChild(img);";
    [webView stringByEvaluatingJavaScriptFromString:str4];
}

完整代码示例

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
//第一步：获取网页body并输出查看`为了后续查找相应对象的id或者class`
    NSString *bodyString = @"document.body.outerHTML";
    NSString *body = [webView  stringByEvaluatingJavaScriptFromString:bodyString];
    NSLog(@"%@",body);

// 第二部：找到body所有修改元素的id或者class等
// 获取对象:使用id
    NSString *btn = @"var btn = document.getElementById('index-bn');"
                       ;
// 获取对象:使用class
   // NSString *str3 = @"var change = document.getElementsByClassName('change')[0];"

   [webView  stringByEvaluatingJavaScriptFromString:btn];

// 更改属性文字、大小、背景颜色、更改点击事件
    NSString *attr = @ "btn.innerHTML = '我也想百度一下';"
                      "btn.style.height = '200px';"
                      "btn.style.background = 'black';"
                      "btn.onclick = function(){location.href = 'lyon://name_number_?&10086';}";
    
    [webView  stringByEvaluatingJavaScriptFromString:attr];

// 删除
    NSString *remove = @"btn.remove();";
    [webView  stringByEvaluatingJavaScriptFromString:remove];


 // 插入
    NSString *str4 =@"var img = document.createElement('img');"
                     "img.src = 'img_01.jpg';"
                     "img.width = '160';"
                     "img.height = '200';"
                     "document.body.appendChild(img);";
    [webView stringByEvaluatingJavaScriptFromString:str4];*/

}

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSLog(@"%@",request.URL);
  
    return YES;
}

@end