在應用開發中，常常會嵌入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