JavaScript進階班之DOM技術總結

目錄總覽

1、DOM簡介

1.1、什么是DOM

文檔對象模型（Document Object Model，簡稱 DOM），是 W3C 組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口，W3C 已經定義了一系列的 DOM 接口，通過這些 DOM 接口可以改變網頁的內容、結構和樣式。

文檔：一個頁面就是一個文檔，DOM中使用doucument來表示
元素：頁面中的所有標簽都是元素，DOM中使用 element 表示
節點：網頁中的所有內容都是節點（標簽，屬性，文本，注釋等），DOM中使用node表示

DOM 把以上內容都看做是對象

2、獲取元素

2.1、如何獲取頁面元素

DOM在我們實際開發中主要用來操作元素。

我們如何來獲取頁面中的元素呢?

獲取頁面中的元素可以使用以下幾種方式:

根據 ID 獲取
根據標簽名獲取
通過 HTML5 新增的方法獲取
特殊元素獲取

2.2、根據ID獲取

使用 getElementByld() 方法可以獲取帶ID的元素對象

doucument.getElementByld('id名')

使用 console.dir() 可以打印我們獲取的元素對象，更好的查看對象里面的屬性和方法。

示例

<div id="time">2019-9-9</div>
<script>
    // 1.因為我們文檔頁面從上往下加載，所以得先有標簽，所以script寫在標簽下面
    // 2.get 獲得 element 元素 by 通過 駝峰命名法
    // 3.參數 id是大小寫敏感的字符串
    // 4.返回的是一個元素對象
    var timer=document.getElementById('time');
    console.log(timer);
    // 5. console.dir 打印我們的元素對象，更好的查看里面的屬性和方法
    console.dir(timer);
</script>

2.3、根據標簽名獲取

根據標簽名獲取，使用 getElementByTagName() 方法可以返回帶有指定標簽名的對象的集合

doucument.getElementsByTagName('標簽名');

因為得到的是一個對象的集合，所以我們想要操作里面的元素就需要遍歷
得到元素對象是動態的
返回的是獲取過來元素對象的集合，以偽數組的形式存儲
如果獲取不到元素，則返回為空的偽數組(因為獲取不到對象)

<ul>
  <li>知否知否，應是等你好久</li>
    <li>知否知否，應是等你好久</li>
    <li>知否知否，應是等你好久</li>
    <li>知否知否，應是等你好久</li>
    <li>知否知否，應是等你好久</li>
</ul>
<script>
    // 1.返回的是獲取過來元素對象的集合 以偽數組的形式存儲
    var lis=document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
    // 2.依次打印,遍歷
    for (var i=0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    // 3.如果頁面中只有 1 個 li，返回的還是偽數組的形式
    // 4.如果頁面中沒有這個元素，返回的是空偽數組
</script>

2.4、根據標簽名獲取

還可以根據標簽名獲取某個元素（父元素）內部所有指定標簽名的子元素,獲取的時候不包括父元素自己

element.getElementsByTagName('標簽名')

ol.getElementsByTagName('li');

注意：父元素必須是單個對象(必須指明是哪一個元素對象)，獲取的時候不包括父元素自己

<script>
  //element.getElementsByTagName('標簽名'); 父元素必須是指定的單個元素
    var ol=document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'));
</script>

2.5、通過H5新增方法獲取

①getElementsByClassName

根據類名返回元素對象合集

document.getElementsByClassName('類名')

document.getElementsByClassName('類名');

②document.querySelector

根據指定選擇器返回第一個元素對象

document.querySelector('選擇器');
// 切記里面的選擇器需要加符號 
// 類選擇器.box 
// id選擇器 #nav
var firstBox=document.querySelector('.box');

③document.querySelectorAll

根據指定選擇器返回所有元素對象

document.querySelectorAll('選擇器');

注意：

querySelector 和 querySelectorAll 里面的選擇器需要加符號,比如: document.querySelector('#nav');

④例子

<script>
  // 1. getElementsByClassName 根據類名獲得某些元素集合
    var boxs=document.getElementsByClassName('box');
    console.log(boxs);
    // 2. querySelector 返回指定選擇器的第一個元素對象  切記 里面的選擇器需要加符號 .box  #nav
    var firstBox=document.querySelector('.box');
    console.log(firstBox);
    var nav=document.querySelector('#nav');
    console.log(nav);
    var li=document.querySelector('li');
    console.log(li);
    // 3. querySelectorAll()返回指定選擇器的所有元素對象集合
    var allBox=document.querySelectorAll('.box');
    console.log(allBox);
    var lis=document.querySelectorAll('li');
    console.log(lis);
</script>

2.6、獲取特殊元素

①獲取body元素

返回body元素對象

document.body;

②獲取html元素

返回html元素對象

document.documentElement;

3、事件基礎

3.1、事件概述

JavaScript 使我們有能力創建動態頁面，而事件是可以被 JavaScript 偵測到的行為。

簡單理解：觸發— 響應機制。

網頁中的每個元素都可以產生某些可以觸發 JavaScript 的事件，例如，我們可以在用戶點擊某按鈕時產生一個事件，然后去執行某些操作。

3.2、事件三要素

事件源(誰)
事件類型(什么事件)
事件處理程序(做啥)

<script>
    // 點擊一個按鈕，彈出對話框
   // 1. 事件是有三部分組成  事件源  事件類型  事件處理程序   我們也稱為事件三要素
    //(1) 事件源 事件被觸發的對象   誰  按鈕
    var btn=document.getElementById('btn');
    //(2) 事件類型  如何觸發 什么事件 比如鼠標點擊(onclick) 還是鼠標經過 還是鍵盤按下
    //(3) 事件處理程序  通過一個函數賦值的方式 完成
    btn.onclick=function() {
        alert('點秋香');
    }
</script>

3.3、執行事件的步驟

獲取事件源
注冊事件(綁定事件)
添加事件處理程序(采取函數賦值形式)

<script>
    // 執行事件步驟
    // 點擊div 控制臺輸出 我被選中了
   // 1. 獲取事件源
    var div=document.querySelector('div');
    // 2.綁定事件 注冊事件
    // div.onclick 
    // 3.添加事件處理程序 
    div.onclick=function() {
        console.log('我被選中了');
    }
</script>

3.4、鼠標事件

鼠標事件	觸發條件
onclick	鼠標點擊左鍵觸發
onmouseover	鼠標經過觸發
onmouseout	鼠標離開觸發
onfocus	獲得鼠標焦點觸發
onblur	失去鼠標焦點觸發
onmousemove	鼠標移動觸發
onmouseup	鼠標彈起觸發
onmousedown	鼠標按下觸發

4、操作元素

JavaScript 的 DOM 操作可以改變網頁內容、結構和樣式，我們可以利用 DOM 操作元素來改變元素里面的內容、屬性等。注意以下都是屬性

4.1、改變元素內容

從起始位置到終止位置的內容，但它去除html標簽，同時空格和換行也會去掉。

element.innerText

起始位置到終止位置的全部內容，包括HTML標簽，同時保留空格和換行

element.innerHTML

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>

    <script>
        // innerText 和 innerHTML的區別 
        // 1. innerText 不識別html標簽,去除空格和換行
        var div=document.querySelector('div');
        div.innerText='<strong>今天是：</strong> 2019';
        // 2. innerHTML 識別html標簽 保留空格和換行的
        div.innerHTML='<strong>今天是：</strong> 2019';
        // 這兩個屬性是可讀寫的  可以獲取元素里面的內容
        var p=document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

4.2、改變元素屬性

// img.屬性
img.src="xxx";

input.value="xxx";
input.type="xxx";
input.checked="xxx";
input.selected=true / false;
input.disabled=true / false;

4.3、改變樣式屬性

我們可以通過 JS 修改元素的大小、顏色、位置等樣式。

行內樣式操作

// element.style
div.style.backgroundColor='pink';
div.style.width='250px';

類名樣式操作

// element.className

注意：

JS里面的樣式采取駝峰命名法，比如 fontSize ，backgroundColor
JS 修改 style 樣式操作，產生的是行內樣式，CSS權重比較高
如果樣式修改較多，可以采取操作類名方式更改元素樣式
class 因為是個保留字，因此使用className來操作元素類名屬性
className 會直接更改元素的類名，會覆蓋原先的類名

<body>
    <div class="first">文本</div>
		<script>
        // 1. 使用 element.style 獲得修改元素樣式  如果樣式比較少 或者 功能簡單的情況下使用
        var test=document.querySelector('div');
        test.onclick=function() {
            // this.style.backgroundColor='purple';
            // this.style.color='#fff';
            // this.style.fontSize='25px';
            // this.style.marginTop='100px';
            // 讓我們當前元素的類名改為了 change

            // 2. 我們可以通過 修改元素的className更改元素的樣式 適合于樣式較多或者功能復雜的情況
            // 3. 如果想要保留原先的類名，我們可以這么做 多類名選擇器
            // this.className='change';
            this.className='first change';
        }
    </script>
</body>

4.4、總結

4.5、排他思想

如果有同一組元素，我們相要某一個元素實現某種樣式，需要用到循環的排他思想算法：

所有元素全部清除樣式（干掉其他人）
給當前元素設置樣式（留下我自己）
注意順序不能顛倒，首先干掉其他人，再設置自己

<body>
  <button>按鈕1</button>
    <button>按鈕2</button>
    <button>按鈕3</button>
    <button>按鈕4</button>
    <button>按鈕5</button>
    <script>
        // 1. 獲取所有按鈕元素
        var btns=document.getElementsByTagName('button');
        // btns得到的是偽數組  里面的每一個元素 btns[i]
        for (var i=0; i < btns.length; i++) {
            btns[i].onclick=function() {
                // (1) 我們先把所有的按鈕背景顏色去掉  干掉所有人
                for (var i=0; i < btns.length; i++) {
                    btns[i].style.backgroundColor='';
                }
                // (2) 然后才讓當前的元素背景顏色為pink 留下我自己
                this.style.backgroundColor='pink';

            }
        }
        //2. 首先先排除其他人，然后才設置自己的樣式 這種排除其他人的思想我們成為排他思想
    </script>
</body>

4.6、自定義屬性

4.6.1、獲取屬性值

獲取內置屬性值(元素本身自帶的屬性)

element.屬性;

獲取自定義的屬性

element.getAttribute('屬性');

4.6.2、設置屬性值

設置內置屬性值

element.屬性='值';

主要設置自定義的屬性

element.setAttribute('屬性','值');

4.6.3、移除屬性

element.removeAttribute('屬性');

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div=document.querySelector('div');
        // 1. 獲取元素的屬性值
        // (1) element.屬性
        console.log(div.id);
        //(2) element.getAttribute('屬性')  get得到獲取 attribute 屬性的意思 我們程序員自己添加的屬性我們稱為自定義屬性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 設置元素屬性值
        // (1) element.屬性='值'
        div.id='test';
        div.className='navs';
        // (2) element.setAttribute('屬性', '值');  主要針對于自定義屬性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  這里面寫的就是class 不是className
        // 3 移除屬性 removeAttribute(屬性)    
        div.removeAttribute('index'); 		
		</script>
</body>

4.7、H5自定義屬性

自定義屬性目的：

保存并保存數據，有些數據可以保存到頁面中而不用保存到數據庫中
有些自定義屬性很容易引起歧義，不容易判斷到底是內置屬性還是自定義的，所以H5有了規定

4.7.1 設置H5自定義屬性

H5規定自定義屬性 data-開頭作為屬性名并賦值

<div data-index="1"></>
// 或者使用JavaScript設置
div.setAttribute('data-index',1);

4.7.2 獲取H5自定義屬性

兼容性獲取 element.getAttribute('data-index')
H5新增的：element.dataset.index 或element.dataset['index'] IE11才開始支持

<body>
  <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div=document.querySelector('div');
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的獲取自定義屬性的方法 它只能獲取data-開頭的
        // dataset 是一個集合里面存放了所有以data開頭的自定義屬性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定義屬性里面有多個-鏈接的單詞，我們獲取的時候采取 駝峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>

5、節點操作

獲取元素通常使用兩種方式：

1.利用DOM提供的方法獲取元素	2.利用節點層級關系獲取元素
document.getElementById()	利用父子兄節點關系獲取元素
document.getElementsByTagName()	邏輯性強，但是兼容性較差
document.querySelector 等
邏輯性不強，繁瑣

這兩種方式都可以獲取元素節點，我們后面都會使用，但是節點操作更簡單

一般的，節點至少擁有三個基本屬性

5.1、節點概述

網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），在DOM 中，節點使用 node 來表示。

HTML DOM 樹中的所有節點均可通過 JavaScript 進行訪問，所有 HTML 元素（節點）均可被修改，也可以創建或刪除。

一般的，節點至少擁有nodeType（節點類型）、nodeName（節點名稱）和nodeValue（節點值）這三個基本屬性。

元素節點：nodeType 為1
屬性節點：nodeType 為2
文本節點：nodeType 為3(文本節點包括文字、空格、換行等)

我們在實際開發中，節點操作主要操作的是元素節點

利用 DOM 樹可以把節點劃分為不同的層級關系，常見的是父子兄層級關系。

5.2、父級節點

node.parentNode

parentNode屬性可以返回某節點的父結點，注意是最近的一個父結點
如果指定的節點沒有父結點則返回null

<body>
  <!-- 節點的優點 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        // 1. 父節點 parentNode
        var erweima=document.querySelector('.erweima');
        // var box=document.querySelector('.box');
        // 得到的是離元素最近的父級節點(親爸爸) 如果找不到父節點就返回為 null
        console.log(erweima.parentNode);
    </script>
</body>

5.3、子結點

parentNode.childNodes(標準)

parentNode.childNodes 返回包含指定節點的子節點的集合，該集合為即時更新的集合
返回值包含了所有的子結點，包括元素節點，文本節點等
如果只想要獲得里面的元素節點，則需要專門處理。所以我們一般不提倡使用childNodes

parentNode.children(非標準)

parentNode.children 是一個只讀屬性，返回所有的子元素節點
它只返回子元素節點，其余節點不返回（這個是我們重點掌握的）
雖然 children 是一個非標準，但是得到了各個瀏覽器的支持，因此我們可以放心使用

<body>
  <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>
    <script>
        // DOM 提供的方法（API）獲取
        var ul=document.querySelector('ul');
        var lis=ul.querySelectorAll('li');
        // 1. 子節點  childNodes 所有的子節點 包含 元素節點 文本節點等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 獲取所有的子元素節點 也是我們實際開發常用的
        console.log(ul.children);
    </script>
</body>

5.3.1、第一個子結點

parentNode.firstChild

firstChild 返回第一個子節點，找不到則返回null
同樣，也是包含所有的節點

5.3.2、最后一個子結點

parentNode.lastChild

lastChild 返回最后一個子節點，找不到則返回null
同樣，也是包含所有的節點

<body>
  <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol=document.querySelector('ol');
        // 1. firstChild 第一個子節點 不管是文本節點還是元素節點
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一個子元素節點 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 實際開發的寫法  既沒有兼容性問題又返回第一個子元素
        console.log(ol.children[0]);			//第一個子元素節點
        console.log(ol.children[ol.children.length - 1]);//最后一個子元素節點
    </script>
</body>

5.3.3、第一個子結點(兼容性)

parentNode.firstElementChild

firstElementChild 返回第一個子節點，找不到則返回null
有兼容性問題，IE9以上才支持

5.3.4、最后一個子結點(兼容性)

parentNode.lastElementChild

lastElementChild 返回最后一個子節點，找不到則返回null
有兼容性問題，IE9以上才支持

5.3.5、解決方案

實際開發中，firstChild 和 lastChild 包含其他節點，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性問題，那么我們如何獲取第一個子元素節點或最后一個子元素節點呢？

解決方案

如果想要第一個子元素節點，可以使用 parentNode.chilren[0]
如果想要最后一個子元素節點，可以使用

// 數組元素個數減1 就是最后一個元素的索引號
parentNode.chilren[parentNode.chilren.length - 1]

示例：

<body>
    <ol>
        <li>我是li1</li>
				<li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>
    <script>
        var ol=document.querySelector('ol');
        // 1.firstChild 獲取第一個子結點的，包含文本結點和元素結點
        console.log(ol.firstChild);
        // 返回的是文本結點 #text(第一個換行結點)
        
        console.log(ol.lastChild);
        // 返回的是文本結點 #text(最后一個換行結點)
        // 2. firstElementChild 返回第一個子元素結點
        console.log(ol.firstElementChild);
        // <li>我是li1</li>
        
        // 第2個方法有兼容性問題，需要IE9以上才支持
        // 3.實際開發中，既沒有兼容性問題，又返回第一個子元素
        console.log(ol.children[0]);
        // <li>我是li1</li>
        console.log(ol.children[3]);
        // <li>我是li4</li>
        // 當里面li個數不唯一時候，需要取到最后一個結點時這么寫
        console.log(ol.children[ol.children.length - 1]);
    </script>
</body>

5.4、兄弟節點

5.4.1、下一個兄弟節點

node.nextSibling

nextSibling 返回當前元素的下一個兄弟元素節點，找不到則返回null
同樣，也是包含所有的節點

5.4.2、上一個兄弟節點

node.previousSibling

previousSibling 返回當前元素上一個兄弟元素節點，找不到則返回null
同樣，也是包含所有的節點

5.4.3、下一個兄弟節點(兼容性)

node.nextElementSibling

nextElementSibling 返回當前元素下一個兄弟元素節點，找不到則返回null
有兼容性問題，IE9才支持

5.4.4、上一個兄弟節點(兼容性)

node.previousElementSibling

previousElementSibling 返回當前元素上一個兄弟元素節點，找不到則返回null
有兼容性問題，IE9才支持

示例

<body>
    <div>我是div</div>
    <span>我是span</span>
		<script>
        var div=document.querySelector('div');
        // 1.nextSibling 下一個兄弟節點 包含元素節點或者 文本節點等等
        console.log(div.nextSibling);		// #text
        console.log(div.previousSibling);	// #text
        // 2. nextElementSibling 得到下一個兄弟元素節點
        console.log(div.nextElementSibling);	//<span>我是span</span>
        console.log(div.previousElementSibling);//null
    </script>
</body>

如何解決兼容性問題？

答：自己封裝一個兼容性的函數

function getNextElementSibling(element) {
  	var el=element;
    while(el=el.nextSibling) {
        if(el.nodeType===1){
            return el;
        }
    }
    return null;
}

5.5、創建節點

document.createElement('tagName');

document.createElement() 方法創建由 tagName 指定的HTML 元素
因為這些元素原先不存在，是根據我們的需求動態生成的，所以我們也稱為動態創建元素節點

5.5.1、添加節點

node.appendChild(child)

node.appendChild() 方法將一個節點添加到指定父節點的子節點列表末尾。類似于 CSS 里面的 after 偽元素。

node.insertBefore(child,指定元素)

node.insertBefore() 方法將一個節點添加到父節點的指定子節點前面。類似于 CSS 里面的 before 偽元素。

示例

<body>
    <ul>
        <li>123</li>
    </ul>
		<script>
        // 1. 創建節點元素節點
        var li=document.createElement('li');
        // 2. 添加節點 node.appendChild(child)  node 父級  child 是子級 后面追加元素  類似于數組中的push
        // 先獲取父親ul
        var ul=document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加節點 node.insertBefore(child, 指定元素);
        var lili=document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我們想要頁面添加一個新的元素分兩步: 1. 創建元素 2. 添加元素
    </script>
</body>

5.5.2、刪除節點

node.removeChild(child)

node.removeChild()方法從 DOM 中刪除一個子節點，返回刪除的節點

5.5.3、復制節點(克隆節點)

node.cloneNode()

node.cloneNode()方法返回調用該方法的節點的一個副本。也稱為克隆節點/拷貝節點
如果括號參數為空或者為 false ，則是淺拷貝，即只克隆復制節點本身，不克隆里面的子節點
如果括號參數為 true ，則是深度拷貝，會復制節點本身以及里面所有的子節點

示例

<body>
    <ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
		<script>
        var ul=document.querySelector('ul');
        // 1. node.cloneNode(); 括號為空或者里面是false 淺拷貝 只復制標簽不復制里面的內容
        // 2. node.cloneNode(true); 括號為true 深拷貝 復制標簽復制里面的內容
        var lili=ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
</body>

5.5.4、面試題

三種動態創建元素的區別

doucument.write()
element.innerHTML
document.createElement()

區別：

document.write() 是直接將內容寫入頁面的內容流，但是文檔流執行完畢，則它會導致頁面全部重繪
innerHTML 是將內容寫入某個 DOM 節點，不會導致頁面全部重繪
innerHTML 創建多個元素效率更高（不要拼接字符串，采取數組形式拼接），結構稍微復雜

<body>
    <div class="innner"></div>
    <div class="create"></div>
		<script>
        // 2. innerHTML 創建元素
        var inner=document.querySelector('.inner');
        // 2.1 innerHTML 用拼接字符串方法
        for (var i=0; i <=100; i++) {
            inner.innerHTML +='<a href="#">百度</a>';
        }
        // 2.2 innerHTML 用數組形式拼接
        var arr=[];
        for (var i=0; i <=100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML=arr.join('');

        // 3.document.createElement() 創建元素
        var create=document.querySelector('.create');
        var a=document.createElement('a');
        create.appendChild(a);
    </script>
</body>

createElement()創建多個元素效率稍低一點點，但是結構更清晰

總結：不同瀏覽器下， innerHTML 效率要比 createElement 高

6、DOM核心

對于DOM操作，我們主要針對子元素的操作，主要有

創建
增
刪
改
查
屬性操作
時間操作

6.1、創建

document.write
innerHTML
createElement

6.2、增

appendChild
insertBefore

6.3、刪

removeChild

6.4、改

主要修改dom的元素屬性，dom元素的內容、屬性、表單的值等

修改元素屬性：src、href、title 等
修改普通元素內容：innerHTML、innerText
修改表單元素：value、type、disabled
修改元素樣式：style、className

6.5、查

主要獲取查詢dom的元素

DOM提供的API方法：getElementById、getElementsByTagName (古老用法，不推薦)
H5提供的新方法：querySelector、querySelectorAll (提倡)
利用節點操作獲取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

6.6、屬性操作

主要針對于自定義屬性

setAttribute：設置dom的屬性值
getAttribute：得到dom的屬性值
removeAttribute：移除屬性

7、事件高級

7.1、注冊事件(綁定事件)

給元素添加事件，稱為注冊事件或者綁定事件。

注冊事件有兩種方式：傳統方式和方法監聽注冊方式

傳統注冊方式	方法監聽注冊方式
利用 on 開頭的事件 onclick	w3c 標準推薦方式
<button onclick="alert("hi")"></button>	addEventListener() 它是一個方法
btn.onclick=function() {}	IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
特點：注冊事件的唯一性	特點：同一個元素同一個事件可以注冊多個監聽器
同一個元素同一個事件只能設置一個處理函數，最后注冊的處理函數將會覆蓋前面注冊的處理函數	按注冊順序依次執行

①addEventListener事件監聽方式

eventTarget.addEventListener()方法將指定的監聽器注冊到 eventTarget（目標對象）上
當該對象觸發指定的事件時，就會執行事件處理函數

eventTarget.addEventListener(type,listener[,useCapture])

該方法接收三個參數：

type:事件類型字符串，比如click,mouseover,注意這里不要帶on
listener：事件處理函數，事件發生時，會調用該監聽函數
useCapture：可選參數，是一個布爾值，默認是 false。學完 DOM 事件流后，我們再進一步學習

<body>
    <button>傳統注冊事件</button>
		<button>方法監聽注冊事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns=document.querySelectorAll('button');
        // 1. 傳統方式注冊事件
        btns[0].onclick=function() {
            alert('hi');
        }
        btns[0].onclick=function() {
                alert('hao a u');
            }
            // 2. 事件監聽注冊事件 addEventListener 
            // (1) 里面的事件類型是字符串 所以加引號 而且不帶on
            // (2) 同一個元素 同一個事件可以添加多個偵聽器（事件處理程序）
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })
            // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
    </script>
</body>

②attachEvent事件監聽方式(兼容)

eventTarget.attachEvent()方法將指定的監聽器注冊到 eventTarget（目標對象）上
當該對象觸發指定的事件時，指定的回調函數就會被執行

eventTarget.attachEvent(eventNameWithOn,callback)

該方法接收兩個參數：

eventNameWithOn：事件類型字符串，比如 onclick 、onmouseover ，這里要帶 on
callback：事件處理函數，當目標觸發事件時回調函數被調用
ie9以前的版本支持

③注冊事件兼容性解決方案

兼容性處理的原則：首先照顧大多數瀏覽器，再處理特殊瀏覽器

 function addEventListener(element, eventName, fn) {
   // 判斷當前瀏覽器是否支持 addEventListener 方法
      if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三個參數 默認是false
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
      } else {
        // 相當于 element.onclick=fn;
        element['on' + eventName]=fn;
 }

7.2、刪除事件(解綁事件)

7.2.1、removeEventListener刪除事件方式

eventTarget.removeEventListener(type,listener[,useCapture]);

該方法接收三個參數：

type:事件類型字符串，比如click,mouseover,注意這里不要帶on
listener：事件處理函數，事件發生時，會調用該監聽函數
useCapture：可選參數，是一個布爾值，默認是 false。學完 DOM 事件流后，我們再進一步學習

7.2.2、detachEvent刪除事件方式(兼容)

eventTarget.detachEvent(eventNameWithOn,callback);

該方法接收兩個參數：

eventNameWithOn：事件類型字符串，比如 onclick 、onmouseover ，這里要帶 on
callback：事件處理函數，當目標觸發事件時回調函數被調用
ie9以前的版本支持

7.2.3、傳統事件刪除方式

eventTarget.onclick=null;

事件刪除示例：

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
		<script>
        var divs=document.querySelectorAll('div');
        divs[0].onclick=function() {
            alert(11);
            // 1. 傳統方式刪除事件
            divs[0].onclick=null;
        }
        // 2.removeEventListener 刪除事件
        divs[1].addEventListener('click',fn);   //里面的fn不需要調用加小括號

        function fn(){
            alert(22);
            divs[1].removeEventListener('click',fn);
        }
        // 3.IE9 中的刪除事件方式
        divs[2].attachEvent('onclick',fn1);
        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick',fn1);
        }
    </script>
</body>

7.2.4、刪除事件兼容性解決方案

 function removeEventListener(element, eventName, fn) {
   // 判斷當前瀏覽器是否支持 removeEventListener 方法
      if (element.removeEventListener) {
        element.removeEventListener(eventName, fn);  // 第三個參數 默認是false
      } else if (element.detachEvent) {
        element.detachEvent('on' + eventName, fn);
      } else {
        element['on' + eventName]=null;
 }

7.3、DOM事件流

事件流描述的是從頁面中接收事件的順序
事件發生時會在元素節點之間按照特定的順序傳播，這個傳播過程即DOM事件流

事件冒泡： IE 最早提出，事件開始時由最具體的元素接收，然后逐級向上傳播到到 DOM 最頂層節點的過程。
事件捕獲：網景最早提出，由 DOM 最頂層節點開始，然后逐級向下傳播到到最具體的元素接收的過程。

加深理解：

我們向水里面扔一塊石頭，首先它會有一個下降的過程，這個過程就可以理解為從最頂層向事件發生的最具體元素（目標點）的捕獲過程；之后會產生泡泡，會在最低點（最具體元素）之后漂浮到水面上，這個過程相當于事件冒泡。

7.3.1、捕獲階段

document -> html -> body -> father -> son

兩個盒子嵌套，一個父盒子一個子盒子，我們的需求是當點擊父盒子時彈出 father ，當點擊子盒子時彈出 son

<body>
  	<div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三個階段
        // 1. JS 代碼中只能執行捕獲或者冒泡其中的一個階段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡階段。
        // 3. 捕獲階段 如果addEventListener 第三個參數是 true 那么則處于捕獲階段  document -> html -> body -> father -> son
        var son=document.querySelector('.son');
        son.addEventListener('click', function() {
             alert('son');
        }, true);
        var father=document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true);
    </script>
</body>

但是因為DOM流的影響，我們點擊子盒子，會先彈出 father，之后再彈出 son

這是因為捕獲階段由 DOM 最頂層節點開始，然后逐級向下傳播到到最具體的元素接收

document -> html -> body -> father -> son
先看 document 的事件，沒有；再看 html 的事件，沒有；再看 body 的事件，沒有；再看 father 的事件，有就先執行；再看 son 的事件，再執行。

7.3.2、冒泡階段

son -> father ->body -> html -> document

<body>
  	<div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
		// 4. 冒泡階段 如果addEventListener 第三個參數是 false 或者 省略 那么則處于冒泡階段  son -> father ->body -> html -> document
        var son=document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father=document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

我們點擊子盒子，會彈出 son、father、document

這是因為冒泡階段開始時由最具體的元素接收，然后逐級向上傳播到到 DOM 最頂層節點

son -> father ->body -> html -> document

7.3.3、小結

JS 代碼中只能執行捕獲或者冒泡其中的一個階段
onclick 和 attachEvent只能得到冒泡階段
addEventListener(type,listener[,useCapture])第三個參數如果是 true，表示在事件捕獲階段調用事件處理程序；如果是 false (不寫默認就是false),表示在事件冒泡階段調用事件處理程序
實際開發中我們很少使用事件捕獲，我們更關注事件冒泡。
有些事件是沒有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

7.4、事件對象

eventTarget.onclick=function(event) {
   // 這個 event 就是事件對象，我們還喜歡的寫成 e 或者 evt 
} 
eventTarget.addEventListener('click', function(event) {
   // 這個 event 就是事件對象，我們還喜歡的寫成 e 或者 evt  
})

官方解釋：event 對象代表事件的狀態，比如鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態

簡單理解：

事件發生后，跟事件相關的一系列信息數據的集合都放到這個對象里面

這個對象就是事件對象 event，它有很多屬性和方法，比如“

誰綁定了這個事件

鼠標觸發事件的話，會得到鼠標的相關信息，如鼠標位置

鍵盤觸發事件的話，會得到鍵盤的相關信息，如按了哪個鍵

這個 event 是個形參，系統幫我們設定為事件對象，不需要傳遞實參過去
當我們注冊事件時， event 對象就會被系統自動創建，并依次傳遞給事件監聽器（事件處理函數）

<body>
    <div>123</div>
		<script>
        // 事件對象
        var div=document.querySelector('div');
        div.onclick=function(e) {
                // console.log(e);
                // console.log(window.event);
                // e=e || window.event;
                console.log(e);


            }
        // 1. event 就是一個事件對象 寫到我們偵聽函數的 小括號里面 當形參來看
        // 2. 事件對象只有有了事件才會存在，它是系統給我們自動創建的，不需要我們傳遞參數
        // 3. 事件對象 是 我們事件的一系列相關數據的集合 跟事件相關的 比如鼠標點擊里面就包含了鼠標的相關信息，鼠標坐標啊，如果是鍵盤事件里面就包含的鍵盤事件的信息 比如 判斷用戶按下了那個鍵
        // 4. 這個事件對象我們可以自己命名 比如 event 、 evt、 e
        // 5. 事件對象也有兼容性問題 ie678 通過 window.event 兼容性的寫法  e=e || window.event;
    </script>
</body>

7.4.1、事件對象的兼容性方案

事件對象本身的獲取存在兼容問題：

標準瀏覽器中是瀏覽器給方法傳遞的參數，只需要定義形參 e 就可以獲取到。
在 IE6~8 中，瀏覽器不會給方法傳遞參數，如果需要的話，需要到 window.event 中獲取查找

解決：

e=e || window.event;

7.4.2、事件對象的常見屬性和方法

事件對象屬性方法	說明
e.target	返回觸發事件的對象標準
e.srcElement	返回觸發事件的對象非標準 ie6-8使用
e.type	返回事件的類型比如click mouseover 不帶on
e.cancelBubble	該屬性阻止冒泡，非標準，ie6-8使用
e.returnValue	該屬性阻止默認行為非標準，ie6-8使用
e.preventDefault()	該方法阻止默認行為標準比如不讓鏈接跳轉
e.stopPropagation()	阻止冒泡標準

e.target 和 this 的區別：

this 是事件綁定的元素，這個函數的調用者（綁定這個事件的元素）
e.target 是事件觸發的元素。

7.5、事件對象阻止默認行為

<body>
    <div>123</div>
		<a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 常見事件對象的屬性和方法
        // 1. 返回事件類型
        var div=document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);

        }
        // 2. 阻止默認行為（事件） 讓鏈接不跳轉 或者讓提交按鈕不提交
        var a=document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 標準寫法
            })
            // 3. 傳統的注冊方式
        a.onclick=function(e) {
            // 普通瀏覽器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本瀏覽器 ie678  returnValue  屬性
            // e.returnValue;
            // 我們可以利用return false 也能阻止默認行為 沒有兼容性問題 特點： return 后面的代碼不執行了， 而且只限于傳統的注冊方式
            return false;
            alert(11);
        }
    </script>
</body>

7.6、阻止事件冒泡

事件冒泡：開始時由最具體的元素接收，然后逐級向上傳播到到 DOM 最頂層節點

事件冒泡本身的特性，會帶來的壞處，也會帶來的好處，需要我們靈活掌握。

標準寫法

e.stopPropagation();

非標準寫法： IE6-8 利用對象事件 cancelBubble屬性

e.cancelBubble=true;

<body>
    <div class="father">
        <div class="son">son兒子</div>
    </div>
    <script>
        // 常見事件對象的屬性和方法
        // 阻止冒泡  dom 推薦的標準 stopPropagation() 
        var son=document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 傳播
            e.cancelBubble=true; // 非標準 cancel 取消 bubble 泡泡
        }, false);

        var father=document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
		</script>
</body>

7.6.1、阻止事件冒泡的兼容性解決方案

if(e && e.stopPropagation){
  e.stopPropagation();
  }else{
      window.event.cancelBubble=true;
  }

4.4.4 e.target 與 this

e.target 與 this 的區別

this是事件綁定的元素，這個函數的調用者(綁定這個事件的元素)
e.target是事件觸發的元素

<body>
    <div>123</div>
		<ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常見事件對象的屬性和方法
        // 1. e.target 返回的是觸發事件的對象（元素）  this 返回的是綁定事件的對象（元素）
        // 區別 ： e.target 點擊了那個元素，就返回那個元素 this 那個元素綁定了這個點擊事件，那么就返回誰
        var div=document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        })
        var ul=document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我們給ul 綁定了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.currentTarget);

                // e.target 指向我們點擊的那個對象 誰觸發了這個事件 我們點擊的是li e.target 指向的就是li
                console.log(e.target);

            })
            // 了解兼容性
            // div.onclick=function(e) {
            //     e=e || window.event;
            //     var target=e.target || e.srcElement;
            //     console.log(target);

        // }
        // 2. 了解 跟 this 有個非常相似的屬性 currentTarget  ie678不認識
    </script>
</body>

4.4.5 事件對象的兼容性

事件對象本身的獲取存在兼容問題：

標準瀏覽器中瀏覽器是給方法傳遞的參數，只需定義形參e就可以獲取到
在 IE6 -> 8 中，瀏覽器不會給方法傳遞參數，如果需要的話，需要到window.event中獲取查找

解決方案

e=e || window.event

<body>
    <div>123</div>
		<script>
        // 事件對象
        var div=document.querySelector('div');
        div.onclick=function(e) {
                // e=e || window.event;
                console.log(e);
				// 事件對象也有兼容性問題 ie678 通過 window.event 兼容性的寫法  e=e || window.event;

            }
</body>

7.7、事件委托

事件委托也稱為事件代理，在 jQuery 里面稱為事件委派
事件委托的原理

不是每個子節點單獨設置事件監聽器，而是事件監聽器設置在其父節點上，然后利用冒泡原理影響設置每個子節點

<body>
    <ul>
  	<li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：給父節點添加偵聽器， 利用事件冒泡影響每一個子節點
        var ul=document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，點我應有彈框在手！');
            // e.target 這個可以得到我們點擊的對象
            e.target.style.backgroundColor='pink';
            // 點了誰，就讓誰的style里面的backgroundColor顏色變為pink
        })
    </script>
</body>

以上案例：給 ul 注冊點擊事件，然后利用事件對象的 target 來找到當前點擊的 li，因為點擊 li，事件會冒泡到 ul 上， ul 有注冊事件，就會觸發事件監聽器。

7.8、常見的鼠標事件

鼠標事件	觸發條件
onclick	鼠標點擊左鍵觸發
onmouseover	鼠標經過觸發
onmouseout	鼠標離開觸發
onfocus	獲得鼠標焦點觸發
onblur	失去鼠標焦點觸發
onmousemove	鼠標移動觸發
onmouseup	鼠標彈起觸發
onmousedown	鼠標按下觸發

7.8.1、禁止鼠標右鍵與鼠標選中

contextmenu主要控制應該何時顯示上下文菜單，主要用于程序員取消默認的上下文菜單
selectstart 禁止鼠標選中

<body>
    <h1>我是一段不愿意分享的文字</h1>
	  <script>
        // 1. contextmenu 我們可以禁用右鍵菜單
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault(); // 阻止默認行為
            })
            // 2. 禁止選中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();

        })
    </script>
</body>

7.8.2、鼠標事件對象

event對象代表事件的狀態，跟事件相關的一系列信息的集合
現階段我們主要是用鼠標事件對象 MouseEvent 和鍵盤事件對象 KeyboardEvent。

鼠標事件對象	說明
e.clientX	返回鼠標相對于瀏覽器窗口可視區的X坐標
e.clientY	返回鼠標相對于瀏覽器窗口可視區的Y坐標
e.pageX（重點）	返回鼠標相對于文檔頁面的X坐標 IE9+ 支持
e.pageY（重點）	返回鼠標相對于文檔頁面的Y坐標 IE9+ 支持
e.screenX	返回鼠標相對于電腦屏幕的X坐標
e.screenY	返回鼠標相對于電腦屏幕的Y坐標

示例：

<body>
    <script>
        // 鼠標事件對象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠標在可視區的x和y坐標
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠標在頁面文檔的x和y坐標
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠標在電腦屏幕的x和y坐標
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>
</body>

7.9、常用的鍵盤事件

鍵盤事件	觸發條件
onkeyup	某個鍵盤按鍵被松開時觸發
onkeydown	某個鍵盤按鍵被按下時觸發
onkeypress	某個鍵盤按鍵被按下時觸發，但是它不識別功能鍵，比如 ctrl shift 箭頭等

如果使用addEventListener 不需要加 on
onkeypress 和前面2個的區別是，它不識別功能鍵，比如左右箭頭，shift 等
三個事件的執行順序是： keydown – keypress — keyup

<body>
    <script>
        // 常用的鍵盤事件
        //1. keyup 按鍵彈起的時候觸發 
        // document.onkeyup=function() {
        //         console.log('我彈起了');

        //     }
        document.addEventListener('keyup', function() {
            console.log('我彈起了');
        })

        //3. keypress 按鍵按下的時候觸發  不能識別功能鍵 比如 ctrl shift 左右箭頭啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
            })
            //2. keydown 按鍵按下的時候觸發  能識別功能鍵 比如 ctrl shift 左右箭頭啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
            })
            // 4. 三個事件的執行順序  keydown -- keypress -- keyup
    </script>
</body>

7.9.1、鍵盤對象屬性

鍵盤事件對象屬性	說明
keyCode	返回該鍵值的ASCII值

onkeydown和 onkeyup 不區分字母大小寫，onkeypress 區分字母大小寫。
在我們實際開發中，我們更多的使用keydown和keyup，它能識別所有的鍵（包括功能鍵）
Keypress 不識別功能鍵，但是keyCode屬性能區分大小寫，返回不同的ASCII值

心宇1，陳長福2，劉蓉1，王美清1

（1.福州大學數學與計算機科學學院，福建福州 350108;2.福建庫易信息科技有限責任公司，福建福州 350000）

由于人工抽取網頁信息效率低、成本高，因此根據對大量網頁結構的觀察，提出基于網頁文檔對象模型DOM樹節點路徑相似度的正文抽取方法。依據同網站下的網頁結構相同的特點去除網頁噪聲得到網頁的主題內容，然后結合正文節點在DOM樹中的路徑的相似度抽取正文。通過對不同類型的中文新聞網站上的1 000個網頁進行實驗，結果表明該方法對于97.6%的網頁都能夠去除大部分噪聲并保持正文內容的完整性，正文抽取結果有93.30%的準確率和95.59%的召回率。所提算法對不同類型的網頁都有較好的適應性。

隨著互聯網技術的快速發展，網頁成為人們獲取信息的重要來源之一。然而，網頁上的數據是海量的，單純依靠人工手段獲取網頁信息效率較低，因此需要借助軟件對網頁信息進行全部或部分地自動過濾和分類。目前常用的自動網頁信息獲取方法是正文內容抽取，該類方法是一種被廣泛應用于互聯網數據挖掘的技術，它的目標是從互聯網龐大的數據中提取有意義的和有價值的信息，可以用于信息搜索、Web文檔分類、數據挖掘、機器翻譯、文本摘要等。

常用的正文抽取方法可以分為以下4類：（1）傳統的歸納總結正文抽取方法：根據一些信息模式，從特定的信息源中提取相關內容［1］。此方法效率較低、需要較多的手動操作，獨立性以及適應性較差。（2）基于網頁布局［2］和視覺［3-4］的正文抽取：該方法很大程度上依賴于網頁的風格或者結構。當涉及到有更復雜的嵌套關系的網頁時會出現偏差。（3）基于語義單元［5］或者數據挖掘、機器學習［6］的正文抽取：通過使用分詞和文本分類，雖然準確率有所提高，但是解決方案比較復雜。（4）基于統計的正文抽取［7］：該方法簡單而且具有更好的通用性，但是較低的精確度限制了它的進一步應用。此外，它不能處理短文本、表格文本以及有較長評論的文本。

FINN A等［8］提出正文抽取(Body Text Extrac tion,BTE) 算法，將網頁中的文字和標簽作為序列，抽取序列中文字最多和標簽最少的連續的內容。PINTO D等［9］提出文檔斜率曲線(Document Slope Curves,DSC) 算法，在FINN的方法的基礎上使用窗口方法實現多正文抽取。MANTRATZIS C等［10］提出鏈接定額過濾(Link Quota Filters,LQE) 算法，通過網頁結構分析，分離正文和導航目錄等超鏈接。DEBNATH S等［11］提出特征提取器(Feature Extractor,FE)算法，選擇包含有一定特征的文本、圖像而且重復出現次數較少的內容塊。GOTTRON T等［12］提出正文代碼模糊(Content Code Blurring,CCB)算法，選擇相同格式的長文本作為網頁的正文。劉利等［13］提出基于多特征融合的網頁正文信息抽取，從網頁的多個特征和設計習慣入手定位正文位置。王利等［14］提出基于內容相似度的正文抽取，根據樹節點中文本內容與各級標題的相似度判定小塊文本信息的有效性，由此進行網頁清洗和正文抽取。

分析網頁信息會發現，網頁中包含大量與網頁主題無關的噪聲內容，如廣告鏈接、導航欄、版權信息等。在正文抽取過程中，這些網頁噪聲會影響抽取效果，因此需要通過去噪方式對網頁進行預處理。常用的網頁去噪方法有：

YI L等［15］提出用風格樹（Style Tree,ST）來表達網頁的結構和內容特征，出現相同特征次數多的部分更有可能是噪聲數據。GIBSON D等［16］提出Shingle和模板Hash方法。這兩種算法的缺點是計算量較大。WANG J Y等［17］提出的主題數據提取(Datarich Section Extraction,DSE)算法，該算法通過從上到下比較兩棵相同模板的文檔對象模型 (Document Object Model,DOM)樹，去除樹中相同的部分，剩下的部分作為網頁的主題內容。

根據對現有方法的總結以及對網頁特征的分析，本文提出基于DOM樹節點路徑相似度的正文抽取方法，對于不同結構的網頁都有較好的適應性，對來源于新浪、網易、搜狐、騰訊等大型門戶網站以及多家各類型網站的1 000個網頁進行了抽取實驗，實驗結果表明本文方法有較好的抽取準確度。

1網頁去噪

目前，大部分網頁的源代碼是以超文本標記語言 (Hyper Text Markup Language，HTML)的形式存在的。對于同一網站下的不同網頁，它們由同一個模板生成，因此這些網頁具有相似的結構，而這些網頁中相同的部分就是噪聲內容，它們與網頁所要表達的主題沒有關系。本文在DSE算法的基礎上，首先將與網頁無關的標簽及相關代碼刪除，然后通過將某個網頁與同一網站下的2個或多個網頁進行對比去除相同部分，從而達到去除噪聲的目的。

1.1刪除無關的標簽

網頁源代碼包含了以不同的標簽括起來的各段代碼。例如，網頁標題和一些修飾性代碼主要嵌在標簽<head>和</head>的內部，網頁主題內容包含在<body>和</body>標簽之間，客戶端腳本則包含在<script>和</script>標簽之間。通過對大量HTML文本的研究和分析，發現以下幾類標簽與網頁主題內容的相關性很低，在對比網頁之前可以將這部分內容過濾掉以提高后續的對比速度。

<head>與</head>標簽以及它們之間的內容。

大部分網頁通過層疊樣式表(Cascading Style Sheets,CSS)來調整頁面的布局，<style></style>標簽用于定義HTML文檔的樣式信息，同樣可以刪除。

注釋標簽、<!注釋內容>只是為網站編輯提供說明，并不會在瀏覽器中顯示，也可刪除。

在預處理過程中利用正則表達式刪除以上噪聲代碼。正則表達式通過使用單個字符串來描述、匹配一系列符合某個句法規則的網頁源代碼。符合匹配規則的源代碼將被刪除。

刪除完無關標簽后，再刪除空白行，這樣完成了去噪的第一步。

1.2通過網頁對比去除噪聲

網頁對比可以通過對比它們的 DOM樹來實現。DOM是文檔中數據和結構的一個樹形表示，它定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關系。DOM實際上是以面向對象方式描述的文檔模型。它可以以一種獨立于平臺和語言的方式訪問和修改一個文檔的內容和結構。圖1給出了一個文檔的DOM樹的結構圖。

通過HTML解析（如使用解析器htmlcxx）可以將HTML文檔轉換為DOM樹結構。假設要處理的是某網站的網頁URL1，隨機選取該網站下的另外兩個網頁URL2和URL3，獲得它們的DOM樹。然后分別對比DOM1\DOM2以及DOM1\DOM3, 輸出不同的節點。

對比算法的基本思路是：按深度遍歷3棵樹的節點，為每個節點設置深度、路徑、文本內容、是否為tag（HTML標簽）。以第1個網頁作為目標與另外兩個網頁進行對比，如果3個節點深度相同，則判斷節點的文本內容是否相同，相同的加入模板集合中，不同的加入網頁內容集合中；如果3個節點深度不同，則根據不同情況對相應的節點進行處理，其中網頁1的節點加入到網頁內容集合中。直到3個網頁都遍歷到end節點為止。最后得到的就是網頁1的主題內容，過濾了噪聲部分。

算法偽代碼如下：

for(i=begin1 : end1; j=begin2 : end2; k=begin3 : end3)

{

if(depth1==depth2==depth3)

if(i->text==j->text==k->text)

i加入模板集合;

else

i加入內容集合;

while(depth1 > depth2 || depth1 > depth3)

i++;

}

while(depth1 < depth2)

j++;

while(depth1 < depth3)

k++;

2正文抽取

HTML文檔轉換成DOM樹以后，每個節點都有唯一確定的路徑。網頁中不同內容塊的節點在DOM樹中的公共路徑較少，而同一內容塊的節點的公共路徑很長。本文以這些路徑之間的相似度作為不同節點是否屬于同一內容塊的依據。所有的主題內容都在葉子節點上，記所有葉子節點的路徑為：

其中TAi為文本節點內容。

例如:

<html>

<body>

<div>

<p>This is the first block.</p>

<p>This is the second block.</p>

<p>This is the third block.</p>

</div>

<div>

</div>

</body>

</html>

這段網頁源代碼中的 “This is the first block”節點的路徑為：

“This is the second block”節點的路徑為：

記深度相同的節點A、B的相似度為

0TA≠TB，depth為節點的深度，則任意兩個節點A、B的路徑的相似度可以定義為：

其中nA、nB分別表示節點A、B的深度。

通過對大量網頁的研究發現，正文內容節點大都擁有共同的父節點或者祖父節點，取閾值Th=1-12depth(maxl)-2，其中，maxl為P中字符最多的節點；depth為節點深度，即路徑Pi中的元素個數。記集合P中字符最多的節點為L，與P中其他節點計算相似度，大于閾值的作為正文內容。

3實驗結果分析

本文從新浪、網易、搜狐、騰訊等大型門戶網站以及多家各類型網站中抽取了1 000個網頁作為測試數據，采用基于網頁DOM樹節點路徑相似度的正文抽取方法進行實驗，去噪結果和正文抽取結果如表1所示。

從表1的統計結果可以看出，有97.6%的網頁清洗掉了大部分的噪聲并且完整保留了網頁中的有效信息；對于新浪、網易等門戶網站的抽取結果較好，都有90%以上的準確率和95%以上的召回率；對于其他不同結構的網站，本文的正文抽取方法也都能適用，很好地實現了網頁正文抽取的工作，并且有著較高的準確率和召回率。

為了驗證本文方法的有效性，以上述的1 000個網頁作為樣本，將本文方法與BTE、DSC、FE、LQF、CCB等算法進行對比實驗,實驗結果如表2所示。

由表2可以看出，本文提出的方法相對于現有的統計方法有更好的準確率和召回率。

互聯網的發展為用戶帶來了一個包含豐富信息的巨型數據庫，但是如何識別其中的有效數據是應用的關鍵。本文的正文抽取方法利用網頁DOM樹節點路徑相似的特點實現正文抽取，為之后的數據分類、分析等工作奠定了基礎。

4結論

本文根據新聞正文內容在網頁中相對集中且同網站的新聞頁面有相同模板的特點，提出基于網頁DOM樹節點路徑相似度的正文抽取方法，先用正則表達式刪除網頁源代碼中與正文內容無關的代碼，然后將得到的網頁轉換為DOM樹，再將目標網頁的DOM樹與另外兩個網頁的DOM樹進行對比去除噪聲，最后，根據節點路徑相似度來抽取正文內容。該方法對來自不同網站的數據能夠快速、準確地抽取正文內容，適用于結構變化不大的網頁，但是對正文內容較少的網頁抽取效果仍有待提高。下一步主要工作是加入內容節點與標題節點的路徑之間的距離判斷節點是否為正文，以提高算法的準確度。

參考文獻

［1］ KUSHMERICK N， WELD D S， DOORENBOS R. Wrapper induction for information extraction［C］.IJCAI 1997: Proceedings of the 1997 International Joint Conference on Artificial Intelligence，1997:729-737.

［2］ FU L, MENG Y, XIA Y J， et al. Web content extraction based on webpage layout analysis［C］. ITCS 2010: Proceedings of the 2010 Second International Conference on Information Technology and Computer Science, 2010: 40-43.

［3］ CAI D, YU S P, WEN J R, et al. VIPS: a vision based on page segmentation algorithm［R］.Microsoft Co., Tech. Report, 2003.

［4］ WANG J Q, CHEN Q C, WANG X L, et al. Basic semantic units based web page content extraction［C］. SMC 2008: Proceedings of the 2008 IEEE International Conference on Systems, Man and Cybernetics, Piscataway，NJ: IEEE Press, 2008:1489-1494.

［5］ UZUN E, AGUN H V, YERLIKAYA T. Web content extraction by using decision tree learning［C］. SIU 2012: Signal Processing and Communications Applications Conference, 2012: 1-4.

［6］ PAN D H, QIUS G, YIN D W. Web page content extraction method based on link density and statistic［C］. WiCOM 2008: Wireless Communications, Networking and Mobile Computing, Dalian, China, IEEE Press, 2008:1-4.

［7］ REIS D C, GOLGHER P B. Automatic web news extraction using tree edit distance［C］. Proc. WWW 2004: The 13th International Conference on World Wide Web, New York: ACM, 2004: 502-511.

［8］ FINN A, KUSHMERICK N, SMYTH B. Fact or fiction: Con tent classification for digital libraries［C］. Proc of the 2nd DELOS Network of Excellence Workshop on Personalization and Recommender Systems in Digital Libraries. Dublin, Ireland, 2001: 1-6.

［9］ PINTO D, BRANSTEIN M, COLEMAN R, et al. QuASM: A system for question answering using semistructured data［C］. Proc of the 2nd ACM/ IEEECS Joint Conference on Digital Libraries. Portland, USA, 2002: 46-55.

［10］ MANTRATZIS C, ORGUN M, CASSIDY S. Separating XHTML content from navigation clutter using DOMstructure block analysis［C］. Proc of the 16th ACM Conference on Hypertext and Hypermedia， Salzburg, Austria, 2005: 145-147.

［11］ DEBNATH S, MITRA P, GILES C L. Automatic extraction of informative blocks from webpages［C］. Proc of the ACM Symposium on Applied Computing， SantaFe, USA, 2005: 1722-1726.

［12］ GOTTRON T. Content code blurring: A new approach to content extraction［C］. Proc of the 19th International Conference on Database and Expert Systems Applications， Turin, Italy, 2008: 29-33.

［13］劉利, 戴齊, 尹紅風,等. 基于多特征融合的網頁正文信息抽取［J］. 計算機應用與軟件, 2014, 31(7):47-49.

［14］王利, 劉宗田, 王燕華,等. 基于內容相似度的網頁正文提取［J］. 計算機工程, 2010, 36(6):102-104.

［15］ YI L,LIU B,LI X. Eliminating noise information in web pages for data mining［C］. SIGKDD 2003: Proceedings of the 9th ACM SIGKDD International Conference on Knowledge Discovery and Data Mining， New York: ACM, 2003:296-305．

［16］ GIBSON D,PUNERA K,TOMKINS A. The volume and evolution of web page templates［C］. Proc. WWW 2005: Special Interest Tracks and Posters of the 14th International Conference on World Wide Web, New York: ACM, 2005:830-839．

［17］ WANG J Y, LOCHOVSKY F H. Datarich section extraction from HTML pages［C］. WISE 2002: Proceedings of the 3rd International Conference on Web Information Systems Engineering (Workshops)， Los Alamitos, CA: IEEE Computer Society, 2002: 313-322．

AET會員年終大福利！

一個HTML文檔都會被瀏覽器解析轉化出一個Dom樹,Dom樹中的每一項根據DOM模型解析為樹形結構中一個個的節點,程序員就可以通過JavaScript語言動態操作每一個節點,此節主要了解掌握一些有關節點的知識和使用方法

之前說過使用document的方法可以快速獲取元素節點如下:

1 快速獲取HTML中的節點(主要是元素節點)

1.1 document.getElementById()根據元素的Id獲得指定對象

1.2 document.getElementsByName()根據元素的name屬性獲得對象

1.3 document.getElementsByTagName()根據指定的標簽名稱獲得其元素數組

1.4 document.getElementsByClassName()獲取所有指定類名的元素數組

具體的使用方式在240章節的快速獲取頁面元素里面已經說過不再贅述

在一個HTML網頁的Dom樹中會有很多的節點,當操作具體的節點時,可以通過節點屬性的方式快速便捷獲取指定節點進行增刪改查等操作

2 通過節點的屬性獲取相關的節點

通過此方法獲取的節點不一定是元素節點,還有其他類型的節點,比如空文本節點

2.1 獲取當前節點的父節點 parentNode

每一個節點都有一個parentNode屬性用于獲取當前節點(多為獲取當前元素節點)的父節點,如果不存在，則返回null

獲取當前節點的父節點方式為:當前節點.parentNode;如果想獲取其"爺爺"輩的節點只能在其后面再加個點parentNode,再往上再加以此類推

獲取父節點

通過document.getElementById("UList").parentNode 的方法獲取到列表的父節點為body元素節點

2.2 獲取當前節點的子級節點 childNodes

獲取當前節點的子級節點,childNodes只獲取當前節點的第一層子節點,是一個只讀的數組NodeList對象即節點對象的數組,可以通過循環遍歷其子節點

獲取方式當前節點.childNodes 注意:獲取的節點中會有空文本節點

獲取子級節點

通過IE瀏覽器可以查看其空文本節點

以下幾種方式獲取的節點有可能是空文本節點

2.3firstChild與lastChild

獲取當前節點子級節點的第一個(childNodes[0])或最后一個的節點(childNodes[length-1])

獲取當前節點下的首尾節點

2.4 nextSibling

· 獲取當前節點的下一個兄弟節點

2.5 previousSibling

獲取當前節點的上一個兄弟節點

獲取上下兄弟節點

在線咨詢

上一篇：Qt編寫氣體安全管理系統2-界面框架
下一篇：自學完html、css和js之后應該學什么？及自學書

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商