JavaScript進(jìn)階班之DOM技術(shù)總結(jié)

目錄總覽

1、DOM簡介

1.1、什么是DOM

文檔對(duì)象模型（Document Object Model，簡稱 DOM），是 W3C 組織推薦的處理可擴(kuò)展標(biāo)記語言（HTML或者XML）的標(biāo)準(zhǔn)編程接口，W3C 已經(jīng)定義了一系列的 DOM 接口，通過這些 DOM 接口可以改變網(wǎng)頁的內(nèi)容、結(jié)構(gòu)和樣式。

文檔：一個(gè)頁面就是一個(gè)文檔，DOM中使用doucument來表示
元素：頁面中的所有標(biāo)簽都是元素，DOM中使用 element 表示
節(jié)點(diǎn)：網(wǎng)頁中的所有內(nèi)容都是節(jié)點(diǎn)（標(biāo)簽，屬性，文本，注釋等），DOM中使用node表示

DOM 把以上內(nèi)容都看做是對(duì)象

2、獲取元素

2.1、如何獲取頁面元素

DOM在我們實(shí)際開發(fā)中主要用來操作元素。

我們?nèi)绾蝸慝@取頁面中的元素呢?

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

根據(jù) ID 獲取
根據(jù)標(biāo)簽名獲取
通過 HTML5 新增的方法獲取
特殊元素獲取

2.2、根據(jù)ID獲取

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

doucument.getElementByld('id名')

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

示例

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

2.3、根據(jù)標(biāo)簽名獲取

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

doucument.getElementsByTagName('標(biāo)簽名');

因?yàn)榈玫降氖且粋€(gè)對(duì)象的集合，所以我們想要操作里面的元素就需要遍歷
得到元素對(duì)象是動(dòng)態(tài)的
返回的是獲取過來元素對(duì)象的集合，以偽數(shù)組的形式存儲(chǔ)
如果獲取不到元素，則返回為空的偽數(shù)組(因?yàn)楂@取不到對(duì)象)

<ul>
  <li>知否知否，應(yīng)是等你好久</li>
    <li>知否知否，應(yīng)是等你好久</li>
    <li>知否知否，應(yīng)是等你好久</li>
    <li>知否知否，應(yīng)是等你好久</li>
    <li>知否知否，應(yīng)是等你好久</li>
</ul>
<script>
    // 1.返回的是獲取過來元素對(duì)象的集合 以偽數(shù)組的形式存儲(chǔ)
    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 個(gè) li，返回的還是偽數(shù)組的形式
    // 4.如果頁面中沒有這個(gè)元素，返回的是空偽數(shù)組
</script>

2.4、根據(jù)標(biāo)簽名獲取

還可以根據(jù)標(biāo)簽名獲取某個(gè)元素（父元素）內(nèi)部所有指定標(biāo)簽名的子元素,獲取的時(shí)候不包括父元素自己

element.getElementsByTagName('標(biāo)簽名')

ol.getElementsByTagName('li');

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

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

2.5、通過H5新增方法獲取

①getElementsByClassName

根據(jù)類名返回元素對(duì)象合集

document.getElementsByClassName('類名')

document.getElementsByClassName('類名');

②document.querySelector

根據(jù)指定選擇器返回第一個(gè)元素對(duì)象

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

③document.querySelectorAll

根據(jù)指定選擇器返回所有元素對(duì)象

document.querySelectorAll('選擇器');

注意：

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

④例子

<script>
  // 1. getElementsByClassName 根據(jù)類名獲得某些元素集合
    var boxs=document.getElementsByClassName('box');
    console.log(boxs);
    // 2. querySelector 返回指定選擇器的第一個(gè)元素對(duì)象  切記 里面的選擇器需要加符號(hào) .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()返回指定選擇器的所有元素對(duì)象集合
    var allBox=document.querySelectorAll('.box');
    console.log(allBox);
    var lis=document.querySelectorAll('li');
    console.log(lis);
</script>

2.6、獲取特殊元素

①獲取body元素

返回body元素對(duì)象

document.body;

②獲取html元素

返回html元素對(duì)象

document.documentElement;

3、事件基礎(chǔ)

3.1、事件概述

JavaScript 使我們有能力創(chuàng)建動(dòng)態(tài)頁面，而事件是可以被 JavaScript 偵測到的行為。

簡單理解：觸發(fā)— 響應(yīng)機(jī)制。

網(wǎng)頁中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 的事件，例如，我們可以在用戶點(diǎn)擊某按鈕時(shí)產(chǎn)生一個(gè)事件，然后去執(zhí)行某些操作。

3.2、事件三要素

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

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

3.3、執(zhí)行事件的步驟

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

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

3.4、鼠標(biāo)事件

鼠標(biāo)事件	觸發(fā)條件
onclick	鼠標(biāo)點(diǎn)擊左鍵觸發(fā)
onmouseover	鼠標(biāo)經(jīng)過觸發(fā)
onmouseout	鼠標(biāo)離開觸發(fā)
onfocus	獲得鼠標(biāo)焦點(diǎn)觸發(fā)
onblur	失去鼠標(biāo)焦點(diǎn)觸發(fā)
onmousemove	鼠標(biāo)移動(dòng)觸發(fā)
onmouseup	鼠標(biāo)彈起觸發(fā)
onmousedown	鼠標(biāo)按下觸發(fā)

4、操作元素

JavaScript 的 DOM 操作可以改變網(wǎng)頁內(nèi)容、結(jié)構(gòu)和樣式，我們可以利用 DOM 操作元素來改變?cè)乩锩娴膬?nèi)容、屬性等。注意以下都是屬性

4.1、改變?cè)貎?nèi)容

從起始位置到終止位置的內(nèi)容，但它去除html標(biāo)簽，同時(shí)空格和換行也會(huì)去掉。

element.innerText

起始位置到終止位置的全部內(nèi)容，包括HTML標(biāo)簽，同時(shí)保留空格和換行

element.innerHTML

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

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

4.2、改變?cè)貙傩?/h1>

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

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

4.3、改變樣式屬性

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

行內(nèi)樣式操作

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

類名樣式操作

// element.className

注意：

JS里面的樣式采取駝峰命名法，比如 fontSize ，backgroundColor
JS 修改 style 樣式操作，產(chǎn)生的是行內(nèi)樣式，CSS權(quán)重比較高
如果樣式修改較多，可以采取操作類名方式更改元素樣式
class 因?yàn)槭莻€(gè)保留字，因此使用className來操作元素類名屬性
className 會(huì)直接更改元素的類名，會(huì)覆蓋原先的類名

<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';
            // 讓我們當(dāng)前元素的類名改為了 change

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

4.4、總結(jié)

4.5、排他思想

如果有同一組元素，我們相要某一個(gè)元素實(shí)現(xiàn)某種樣式，需要用到循環(huán)的排他思想算法：

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

<body>
  <button>按鈕1</button>
    <button>按鈕2</button>
    <button>按鈕3</button>
    <button>按鈕4</button>
    <button>按鈕5</button>
    <script>
        // 1. 獲取所有按鈕元素
        var btns=document.getElementsByTagName('button');
        // btns得到的是偽數(shù)組  里面的每一個(gè)元素 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) 然后才讓當(dāng)前的元素背景顏色為pink 留下我自己
                this.style.backgroundColor='pink';

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

4.6、自定義屬性

4.6.1、獲取屬性值

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

element.屬性;

獲取自定義的屬性

element.getAttribute('屬性');

4.6.2、設(shè)置屬性值

設(shè)置內(nèi)置屬性值

element.屬性='值';

主要設(shè)置自定義的屬性

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. 設(shè)置元素屬性值
        // (1) element.屬性='值'
        div.id='test';
        div.className='navs';
        // (2) element.setAttribute('屬性', '值');  主要針對(duì)于自定義屬性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  這里面寫的就是class 不是className
        // 3 移除屬性 removeAttribute(屬性)    
        div.removeAttribute('index'); 		
		</script>
</body>

4.7、H5自定義屬性

自定義屬性目的：

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

4.7.1 設(shè)置H5自定義屬性

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

<div data-index="1"></>
// 或者使用JavaScript設(shè)置
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 是一個(gè)集合里面存放了所有以data開頭的自定義屬性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定義屬性里面有多個(gè)-鏈接的單詞，我們獲取的時(shí)候采取 駝峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>

5、節(jié)點(diǎn)操作

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

1.利用DOM提供的方法獲取元素	2.利用節(jié)點(diǎn)層級(jí)關(guān)系獲取元素
document.getElementById()	利用父子兄節(jié)點(diǎn)關(guān)系獲取元素
document.getElementsByTagName()	邏輯性強(qiáng)，但是兼容性較差
document.querySelector 等
邏輯性不強(qiáng)，繁瑣

這兩種方式都可以獲取元素節(jié)點(diǎn)，我們后面都會(huì)使用，但是節(jié)點(diǎn)操作更簡單

一般的，節(jié)點(diǎn)至少擁有三個(gè)基本屬性

5.1、節(jié)點(diǎn)概述

網(wǎng)頁中的所有內(nèi)容都是節(jié)點(diǎn)（標(biāo)簽、屬性、文本、注釋等），在DOM 中，節(jié)點(diǎn)使用 node 來表示。

HTML DOM 樹中的所有節(jié)點(diǎn)均可通過 JavaScript 進(jìn)行訪問，所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除。

一般的，節(jié)點(diǎn)至少擁有nodeType（節(jié)點(diǎn)類型）、nodeName（節(jié)點(diǎn)名稱）和nodeValue（節(jié)點(diǎn)值）這三個(gè)基本屬性。

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

我們?cè)趯?shí)際開發(fā)中，節(jié)點(diǎn)操作主要操作的是元素節(jié)點(diǎn)

利用 DOM 樹可以把節(jié)點(diǎn)劃分為不同的層級(jí)關(guān)系，常見的是父子兄層級(jí)關(guān)系。

5.2、父級(jí)節(jié)點(diǎn)

node.parentNode

parentNode屬性可以返回某節(jié)點(diǎn)的父結(jié)點(diǎn)，注意是最近的一個(gè)父結(jié)點(diǎn)
如果指定的節(jié)點(diǎn)沒有父結(jié)點(diǎn)則返回null

<body>
  <!-- 節(jié)點(diǎn)的優(yōu)點(diǎn) -->
    <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. 父節(jié)點(diǎn) parentNode
        var erweima=document.querySelector('.erweima');
        // var box=document.querySelector('.box');
        // 得到的是離元素最近的父級(jí)節(jié)點(diǎn)(親爸爸) 如果找不到父節(jié)點(diǎn)就返回為 null
        console.log(erweima.parentNode);
    </script>
</body>

5.3、子結(jié)點(diǎn)

parentNode.childNodes(標(biāo)準(zhǔn))

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

parentNode.children(非標(biāo)準(zhǔn))

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

<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. 子節(jié)點(diǎn)  childNodes 所有的子節(jié)點(diǎn) 包含 元素節(jié)點(diǎn) 文本節(jié)點(diǎn)等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 獲取所有的子元素節(jié)點(diǎn) 也是我們實(shí)際開發(fā)常用的
        console.log(ul.children);
    </script>
</body>

5.3.1、第一個(gè)子結(jié)點(diǎn)

parentNode.firstChild

firstChild 返回第一個(gè)子節(jié)點(diǎn)，找不到則返回null
同樣，也是包含所有的節(jié)點(diǎn)

5.3.2、最后一個(gè)子結(jié)點(diǎn)

parentNode.lastChild

lastChild 返回最后一個(gè)子節(jié)點(diǎn)，找不到則返回null
同樣，也是包含所有的節(jié)點(diǎn)

<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 第一個(gè)子節(jié)點(diǎn) 不管是文本節(jié)點(diǎn)還是元素節(jié)點(diǎn)
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一個(gè)子元素節(jié)點(diǎn) ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 實(shí)際開發(fā)的寫法  既沒有兼容性問題又返回第一個(gè)子元素
        console.log(ol.children[0]);			//第一個(gè)子元素節(jié)點(diǎn)
        console.log(ol.children[ol.children.length - 1]);//最后一個(gè)子元素節(jié)點(diǎn)
    </script>
</body>

5.3.3、第一個(gè)子結(jié)點(diǎn)(兼容性)

parentNode.firstElementChild

firstElementChild 返回第一個(gè)子節(jié)點(diǎn)，找不到則返回null
有兼容性問題，IE9以上才支持

5.3.4、最后一個(gè)子結(jié)點(diǎn)(兼容性)

parentNode.lastElementChild

lastElementChild 返回最后一個(gè)子節(jié)點(diǎn)，找不到則返回null
有兼容性問題，IE9以上才支持

5.3.5、解決方案

實(shí)際開發(fā)中，firstChild 和 lastChild 包含其他節(jié)點(diǎn)，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性問題，那么我們?nèi)绾潍@取第一個(gè)子元素節(jié)點(diǎn)或最后一個(gè)子元素節(jié)點(diǎn)呢？

解決方案

如果想要第一個(gè)子元素節(jié)點(diǎn)，可以使用 parentNode.chilren[0]
如果想要最后一個(gè)子元素節(jié)點(diǎn)，可以使用

// 數(shù)組元素個(gè)數(shù)減1 就是最后一個(gè)元素的索引號(hào)
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 獲取第一個(gè)子結(jié)點(diǎn)的，包含文本結(jié)點(diǎn)和元素結(jié)點(diǎn)
        console.log(ol.firstChild);
        // 返回的是文本結(jié)點(diǎn) #text(第一個(gè)換行結(jié)點(diǎn))
        
        console.log(ol.lastChild);
        // 返回的是文本結(jié)點(diǎn) #text(最后一個(gè)換行結(jié)點(diǎn))
        // 2. firstElementChild 返回第一個(gè)子元素結(jié)點(diǎn)
        console.log(ol.firstElementChild);
        // <li>我是li1</li>
        
        // 第2個(gè)方法有兼容性問題，需要IE9以上才支持
        // 3.實(shí)際開發(fā)中，既沒有兼容性問題，又返回第一個(gè)子元素
        console.log(ol.children[0]);
        // <li>我是li1</li>
        console.log(ol.children[3]);
        // <li>我是li4</li>
        // 當(dāng)里面li個(gè)數(shù)不唯一時(shí)候，需要取到最后一個(gè)結(jié)點(diǎn)時(shí)這么寫
        console.log(ol.children[ol.children.length - 1]);
    </script>
</body>

5.4、兄弟節(jié)點(diǎn)

5.4.1、下一個(gè)兄弟節(jié)點(diǎn)

node.nextSibling

nextSibling 返回當(dāng)前元素的下一個(gè)兄弟元素節(jié)點(diǎn)，找不到則返回null
同樣，也是包含所有的節(jié)點(diǎn)

5.4.2、上一個(gè)兄弟節(jié)點(diǎn)

node.previousSibling

previousSibling 返回當(dāng)前元素上一個(gè)兄弟元素節(jié)點(diǎn)，找不到則返回null
同樣，也是包含所有的節(jié)點(diǎn)

5.4.3、下一個(gè)兄弟節(jié)點(diǎn)(兼容性)

node.nextElementSibling

nextElementSibling 返回當(dāng)前元素下一個(gè)兄弟元素節(jié)點(diǎn)，找不到則返回null
有兼容性問題，IE9才支持

5.4.4、上一個(gè)兄弟節(jié)點(diǎn)(兼容性)

node.previousElementSibling

previousElementSibling 返回當(dāng)前元素上一個(gè)兄弟元素節(jié)點(diǎn)，找不到則返回null
有兼容性問題，IE9才支持

示例

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

如何解決兼容性問題？

答：自己封裝一個(gè)兼容性的函數(shù)

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

5.5、創(chuàng)建節(jié)點(diǎn)

document.createElement('tagName');

document.createElement() 方法創(chuàng)建由 tagName 指定的HTML 元素
因?yàn)檫@些元素原先不存在，是根據(jù)我們的需求動(dòng)態(tài)生成的，所以我們也稱為動(dòng)態(tài)創(chuàng)建元素節(jié)點(diǎn)

5.5.1、添加節(jié)點(diǎn)

node.appendChild(child)

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

node.insertBefore(child,指定元素)

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

示例

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

5.5.2、刪除節(jié)點(diǎn)

node.removeChild(child)

node.removeChild()方法從 DOM 中刪除一個(gè)子節(jié)點(diǎn)，返回刪除的節(jié)點(diǎn)

5.5.3、復(fù)制節(jié)點(diǎn)(克隆節(jié)點(diǎn))

node.cloneNode()

node.cloneNode()方法返回調(diào)用該方法的節(jié)點(diǎn)的一個(gè)副本。也稱為克隆節(jié)點(diǎn)/拷貝節(jié)點(diǎn)
如果括號(hào)參數(shù)為空或者為 false ，則是淺拷貝，即只克隆復(fù)制節(jié)點(diǎn)本身，不克隆里面的子節(jié)點(diǎn)
如果括號(hào)參數(shù)為 true ，則是深度拷貝，會(huì)復(fù)制節(jié)點(diǎn)本身以及里面所有的子節(jié)點(diǎn)

示例

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

5.5.4、面試題

三種動(dòng)態(tài)創(chuàng)建元素的區(qū)別

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

區(qū)別：

document.write() 是直接將內(nèi)容寫入頁面的內(nèi)容流，但是文檔流執(zhí)行完畢，則它會(huì)導(dǎo)致頁面全部重繪
innerHTML 是將內(nèi)容寫入某個(gè) DOM 節(jié)點(diǎn)，不會(huì)導(dǎo)致頁面全部重繪
innerHTML 創(chuàng)建多個(gè)元素效率更高（不要拼接字符串，采取數(shù)組形式拼接），結(jié)構(gòu)稍微復(fù)雜

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

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

createElement()創(chuàng)建多個(gè)元素效率稍低一點(diǎn)點(diǎn)，但是結(jié)構(gòu)更清晰

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

6、DOM核心

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

創(chuàng)建
增
刪
改
查
屬性操作
時(shí)間操作

6.1、創(chuàng)建

document.write
innerHTML
createElement

6.2、增

appendChild
insertBefore

6.3、刪

removeChild

6.4、改

主要修改dom的元素屬性，dom元素的內(nèi)容、屬性、表單的值等

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

6.5、查

主要獲取查詢dom的元素

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

6.6、屬性操作

主要針對(duì)于自定義屬性

setAttribute：設(shè)置dom的屬性值
getAttribute：得到dom的屬性值
removeAttribute：移除屬性

7、事件高級(jí)

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

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

注冊(cè)事件有兩種方式：傳統(tǒng)方式和方法監(jiān)聽注冊(cè)方式

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

①addEventListener事件監(jiān)聽方式

eventTarget.addEventListener()方法將指定的監(jiān)聽器注冊(cè)到 eventTarget（目標(biāo)對(duì)象）上
當(dāng)該對(duì)象觸發(fā)指定的事件時(shí)，就會(huì)執(zhí)行事件處理函數(shù)

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

該方法接收三個(gè)參數(shù)：

type:事件類型字符串，比如click,mouseover,注意這里不要帶on
listener：事件處理函數(shù)，事件發(fā)生時(shí)，會(huì)調(diào)用該監(jiān)聽函數(shù)
useCapture：可選參數(shù)，是一個(gè)布爾值，默認(rèn)是 false。學(xué)完 DOM 事件流后，我們?cè)龠M(jìn)一步學(xué)習(xí)

<body>
    <button>傳統(tǒng)注冊(cè)事件</button>
		<button>方法監(jiān)聽注冊(cè)事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns=document.querySelectorAll('button');
        // 1. 傳統(tǒng)方式注冊(cè)事件
        btns[0].onclick=function() {
            alert('hi');
        }
        btns[0].onclick=function() {
                alert('hao a u');
            }
            // 2. 事件監(jiān)聽注冊(cè)事件 addEventListener 
            // (1) 里面的事件類型是字符串 所以加引號(hào) 而且不帶on
            // (2) 同一個(gè)元素 同一個(gè)事件可以添加多個(gè)偵聽器（事件處理程序）
        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事件監(jiān)聽方式(兼容)

eventTarget.attachEvent()方法將指定的監(jiān)聽器注冊(cè)到 eventTarget（目標(biāo)對(duì)象）上
當(dāng)該對(duì)象觸發(fā)指定的事件時(shí)，指定的回調(diào)函數(shù)就會(huì)被執(zhí)行

eventTarget.attachEvent(eventNameWithOn,callback)

該方法接收兩個(gè)參數(shù)：

eventNameWithOn：事件類型字符串，比如 onclick 、onmouseover ，這里要帶 on
callback：事件處理函數(shù)，當(dāng)目標(biāo)觸發(fā)事件時(shí)回調(diào)函數(shù)被調(diào)用
ie9以前的版本支持

③注冊(cè)事件兼容性解決方案

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

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

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

7.2.1、removeEventListener刪除事件方式

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

該方法接收三個(gè)參數(shù)：

type:事件類型字符串，比如click,mouseover,注意這里不要帶on
listener：事件處理函數(shù)，事件發(fā)生時(shí)，會(huì)調(diào)用該監(jiān)聽函數(shù)
useCapture：可選參數(shù)，是一個(gè)布爾值，默認(rèn)是 false。學(xué)完 DOM 事件流后，我們?cè)龠M(jìn)一步學(xué)習(xí)

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

eventTarget.detachEvent(eventNameWithOn,callback);

該方法接收兩個(gè)參數(shù)：

eventNameWithOn：事件類型字符串，比如 onclick 、onmouseover ，這里要帶 on
callback：事件處理函數(shù)，當(dāng)目標(biāo)觸發(fā)事件時(shí)回調(diào)函數(shù)被調(diào)用
ie9以前的版本支持

7.2.3、傳統(tǒng)事件刪除方式

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. 傳統(tǒng)方式刪除事件
            divs[0].onclick=null;
        }
        // 2.removeEventListener 刪除事件
        divs[1].addEventListener('click',fn);   //里面的fn不需要調(diào)用加小括號(hào)

        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) {
   // 判斷當(dāng)前瀏覽器是否支持 removeEventListener 方法
      if (element.removeEventListener) {
        element.removeEventListener(eventName, fn);  // 第三個(gè)參數(shù) 默認(rèn)是false
      } else if (element.detachEvent) {
        element.detachEvent('on' + eventName, fn);
      } else {
        element['on' + eventName]=null;
 }

7.3、DOM事件流

事件流描述的是從頁面中接收事件的順序
事件發(fā)生時(shí)會(huì)在元素節(jié)點(diǎn)之間按照特定的順序傳播，這個(gè)傳播過程即DOM事件流

事件冒泡： IE 最早提出，事件開始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到到 DOM 最頂層節(jié)點(diǎn)的過程。
事件捕獲：網(wǎng)景最早提出，由 DOM 最頂層節(jié)點(diǎn)開始，然后逐級(jí)向下傳播到到最具體的元素接收的過程。

加深理解：

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

7.3.1、捕獲階段

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

兩個(gè)盒子嵌套，一個(gè)父盒子一個(gè)子盒子，我們的需求是當(dāng)點(diǎn)擊父盒子時(shí)彈出 father ，當(dāng)點(diǎn)擊子盒子時(shí)彈出 son

<body>
  	<div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三個(gè)階段
        // 1. JS 代碼中只能執(zhí)行捕獲或者冒泡其中的一個(gè)階段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡階段。
        // 3. 捕獲階段 如果addEventListener 第三個(gè)參數(shù)是 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>

但是因?yàn)镈OM流的影響，我們點(diǎn)擊子盒子，會(huì)先彈出 father，之后再彈出 son

這是因?yàn)椴东@階段由 DOM 最頂層節(jié)點(diǎn)開始，然后逐級(jí)向下傳播到到最具體的元素接收

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

7.3.2、冒泡階段

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

<body>
  	<div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
		// 4. 冒泡階段 如果addEventListener 第三個(gè)參數(shù)是 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>

我們點(diǎn)擊子盒子，會(huì)彈出 son、father、document

這是因?yàn)槊芭蓦A段開始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到到 DOM 最頂層節(jié)點(diǎn)

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

7.3.3、小結(jié)

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

7.4、事件對(duì)象

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

官方解釋：event 對(duì)象代表事件的狀態(tài)，比如鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)

簡單理解：

事件發(fā)生后，跟事件相關(guān)的一系列信息數(shù)據(jù)的集合都放到這個(gè)對(duì)象里面

這個(gè)對(duì)象就是事件對(duì)象 event，它有很多屬性和方法，比如“

誰綁定了這個(gè)事件

鼠標(biāo)觸發(fā)事件的話，會(huì)得到鼠標(biāo)的相關(guān)信息，如鼠標(biāo)位置

鍵盤觸發(fā)事件的話，會(huì)得到鍵盤的相關(guān)信息，如按了哪個(gè)鍵

這個(gè) event 是個(gè)形參，系統(tǒng)幫我們?cè)O(shè)定為事件對(duì)象，不需要傳遞實(shí)參過去
當(dāng)我們注冊(cè)事件時(shí)， event 對(duì)象就會(huì)被系統(tǒng)自動(dòng)創(chuàng)建，并依次傳遞給事件監(jiān)聽器（事件處理函數(shù)）

<body>
    <div>123</div>
		<script>
        // 事件對(duì)象
        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 就是一個(gè)事件對(duì)象 寫到我們偵聽函數(shù)的 小括號(hào)里面 當(dāng)形參來看
        // 2. 事件對(duì)象只有有了事件才會(huì)存在，它是系統(tǒng)給我們自動(dòng)創(chuàng)建的，不需要我們傳遞參數(shù)
        // 3. 事件對(duì)象 是 我們事件的一系列相關(guān)數(shù)據(jù)的集合 跟事件相關(guān)的 比如鼠標(biāo)點(diǎn)擊里面就包含了鼠標(biāo)的相關(guān)信息，鼠標(biāo)坐標(biāo)啊，如果是鍵盤事件里面就包含的鍵盤事件的信息 比如 判斷用戶按下了那個(gè)鍵
        // 4. 這個(gè)事件對(duì)象我們可以自己命名 比如 event 、 evt、 e
        // 5. 事件對(duì)象也有兼容性問題 ie678 通過 window.event 兼容性的寫法  e=e || window.event;
    </script>
</body>

7.4.1、事件對(duì)象的兼容性方案

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

標(biāo)準(zhǔn)瀏覽器中是瀏覽器給方法傳遞的參數(shù)，只需要定義形參 e 就可以獲取到。
在 IE6~8 中，瀏覽器不會(huì)給方法傳遞參數(shù)，如果需要的話，需要到 window.event 中獲取查找

解決：

e=e || window.event;

7.4.2、事件對(duì)象的常見屬性和方法

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

e.target 和 this 的區(qū)別：

this 是事件綁定的元素，這個(gè)函數(shù)的調(diào)用者（綁定這個(gè)事件的元素）
e.target 是事件觸發(fā)的元素。

7.5、事件對(duì)象阻止默認(rèn)行為

<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>
        // 常見事件對(duì)象的屬性和方法
        // 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. 阻止默認(rèn)行為（事件） 讓鏈接不跳轉(zhuǎn) 或者讓提交按鈕不提交
        var a=document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 標(biāo)準(zhǔn)寫法
            })
            // 3. 傳統(tǒng)的注冊(cè)方式
        a.onclick=function(e) {
            // 普通瀏覽器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本瀏覽器 ie678  returnValue  屬性
            // e.returnValue;
            // 我們可以利用return false 也能阻止默認(rèn)行為 沒有兼容性問題 特點(diǎn)： return 后面的代碼不執(zhí)行了， 而且只限于傳統(tǒng)的注冊(cè)方式
            return false;
            alert(11);
        }
    </script>
</body>

7.6、阻止事件冒泡

事件冒泡：開始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到到 DOM 最頂層節(jié)點(diǎn)

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

標(biāo)準(zhǔn)寫法

e.stopPropagation();

非標(biāo)準(zhǔn)寫法： IE6-8 利用對(duì)象事件 cancelBubble屬性

e.cancelBubble=true;

<body>
    <div class="father">
        <div class="son">son兒子</div>
    </div>
    <script>
        // 常見事件對(duì)象的屬性和方法
        // 阻止冒泡  dom 推薦的標(biāo)準(zhǔn) stopPropagation() 
        var son=document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 傳播
            e.cancelBubble=true; // 非標(biāo)準(zhǔn) 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 的區(qū)別

this是事件綁定的元素，這個(gè)函數(shù)的調(diào)用者(綁定這個(gè)事件的元素)
e.target是事件觸發(fā)的元素

<body>
    <div>123</div>
		<ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常見事件對(duì)象的屬性和方法
        // 1. e.target 返回的是觸發(fā)事件的對(duì)象（元素）  this 返回的是綁定事件的對(duì)象（元素）
        // 區(qū)別 ： e.target 點(diǎn)擊了那個(gè)元素，就返回那個(gè)元素 this 那個(gè)元素綁定了這個(gè)點(diǎn)擊事件，那么就返回誰
        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 指向我們點(diǎn)擊的那個(gè)對(duì)象 誰觸發(fā)了這個(gè)事件 我們點(diǎn)擊的是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 有個(gè)非常相似的屬性 currentTarget  ie678不認(rèn)識(shí)
    </script>
</body>

4.4.5 事件對(duì)象的兼容性

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

標(biāo)準(zhǔn)瀏覽器中瀏覽器是給方法傳遞的參數(shù)，只需定義形參e就可以獲取到
在 IE6 -> 8 中，瀏覽器不會(huì)給方法傳遞參數(shù)，如果需要的話，需要到window.event中獲取查找

解決方案

e=e || window.event

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

            }
</body>

7.7、事件委托

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

不是每個(gè)子節(jié)點(diǎn)單獨(dú)設(shè)置事件監(jiān)聽器，而是事件監(jiān)聽器設(shè)置在其父節(jié)點(diǎn)上，然后利用冒泡原理影響設(shè)置每個(gè)子節(jié)點(diǎn)

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

以上案例：給 ul 注冊(cè)點(diǎn)擊事件，然后利用事件對(duì)象的 target 來找到當(dāng)前點(diǎn)擊的 li，因?yàn)辄c(diǎn)擊 li，事件會(huì)冒泡到 ul 上， ul 有注冊(cè)事件，就會(huì)觸發(fā)事件監(jiān)聽器。

7.8、常見的鼠標(biāo)事件

鼠標(biāo)事件	觸發(fā)條件
onclick	鼠標(biāo)點(diǎn)擊左鍵觸發(fā)
onmouseover	鼠標(biāo)經(jīng)過觸發(fā)
onmouseout	鼠標(biāo)離開觸發(fā)
onfocus	獲得鼠標(biāo)焦點(diǎn)觸發(fā)
onblur	失去鼠標(biāo)焦點(diǎn)觸發(fā)
onmousemove	鼠標(biāo)移動(dòng)觸發(fā)
onmouseup	鼠標(biāo)彈起觸發(fā)
onmousedown	鼠標(biāo)按下觸發(fā)

7.8.1、禁止鼠標(biāo)右鍵與鼠標(biāo)選中

contextmenu主要控制應(yīng)該何時(shí)顯示上下文菜單，主要用于程序員取消默認(rèn)的上下文菜單
selectstart 禁止鼠標(biāo)選中

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

        })
    </script>
</body>

7.8.2、鼠標(biāo)事件對(duì)象

event對(duì)象代表事件的狀態(tài)，跟事件相關(guān)的一系列信息的集合
現(xiàn)階段我們主要是用鼠標(biāo)事件對(duì)象 MouseEvent 和鍵盤事件對(duì)象 KeyboardEvent。

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

示例：

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

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

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

        })
    </script>
</body>

7.9、常用的鍵盤事件

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

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

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

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

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

7.9.1、鍵盤對(duì)象屬性

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

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

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

（1.福州大學(xué) 數(shù)學(xué)與計(jì)算機(jī)科學(xué)學(xué)院，福建福州 350108;2.福建庫易信息科技有限責(zé)任公司，福建福州 350000）

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

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

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

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

分析網(wǎng)頁信息會(huì)發(fā)現(xiàn)，網(wǎng)頁中包含大量與網(wǎng)頁主題無關(guān)的噪聲內(nèi)容，如廣告鏈接、導(dǎo)航欄、版權(quán)信息等。在正文抽取過程中，這些網(wǎng)頁噪聲會(huì)影響抽取效果，因此需要通過去噪方式對(duì)網(wǎng)頁進(jìn)行預(yù)處理。常用的網(wǎng)頁去噪方法有：

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

根據(jù)對(duì)現(xiàn)有方法的總結(jié)以及對(duì)網(wǎng)頁特征的分析，本文提出基于DOM樹節(jié)點(diǎn)路徑相似度的正文抽取方法，對(duì)于不同結(jié)構(gòu)的網(wǎng)頁都有較好的適應(yīng)性，對(duì)來源于新浪、網(wǎng)易、搜狐、騰訊等大型門戶網(wǎng)站以及多家各類型網(wǎng)站的1 000個(gè)網(wǎng)頁進(jìn)行了抽取實(shí)驗(yàn)，實(shí)驗(yàn)結(jié)果表明本文方法有較好的抽取準(zhǔn)確度。

1網(wǎng)頁去噪

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

1.1刪除無關(guān)的標(biāo)簽

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

<head>與</head>標(biāo)簽以及它們之間的內(nèi)容。

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

注釋標(biāo)簽、<!注釋內(nèi)容>只是為網(wǎng)站編輯提供說明，并不會(huì)在瀏覽器中顯示，也可刪除。

在預(yù)處理過程中利用正則表達(dá)式刪除以上噪聲代碼。正則表達(dá)式通過使用單個(gè)字符串來描述、匹配一系列符合某個(gè)句法規(guī)則的網(wǎng)頁源代碼。符合匹配規(guī)則的源代碼將被刪除。

刪除完無關(guān)標(biāo)簽后，再刪除空白行，這樣完成了去噪的第一步。

1.2通過網(wǎng)頁對(duì)比去除噪聲

網(wǎng)頁對(duì)比可以通過對(duì)比它們的 DOM樹來實(shí)現(xiàn)。DOM是文檔中數(shù)據(jù)和結(jié)構(gòu)的一個(gè)樹形表示，它定義了表示和修改文檔所需的對(duì)象、這些對(duì)象的行為和屬性以及這些對(duì)象之間的關(guān)系。DOM實(shí)際上是以面向?qū)ο蠓绞矫枋龅奈臋n模型。它可以以一種獨(dú)立于平臺(tái)和語言的方式訪問和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu)。圖1給出了一個(gè)文檔的DOM樹的結(jié)構(gòu)圖。

通過HTML解析（如使用解析器htmlcxx）可以將HTML文檔轉(zhuǎn)換為DOM樹結(jié)構(gòu)。假設(shè)要處理的是某網(wǎng)站的網(wǎng)頁URL1，隨機(jī)選取該網(wǎng)站下的另外兩個(gè)網(wǎng)頁URL2和URL3，獲得它們的DOM樹。然后分別對(duì)比DOM1\DOM2以及DOM1\DOM3, 輸出不同的節(jié)點(diǎn)。

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

算法偽代碼如下：

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

{

if(depth1==depth2==depth3)

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

i加入模板集合;

else

i加入內(nèi)容集合;

while(depth1 > depth2 || depth1 > depth3)

i++;

}

while(depth1 < depth2)

j++;

while(depth1 < depth3)

k++;

2正文抽取

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

其中TAi為文本節(jié)點(diǎn)內(nèi)容。

例如:

<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>

這段網(wǎng)頁源代碼中的 “This is the first block”節(jié)點(diǎn)的路徑為：

“This is the second block”節(jié)點(diǎn)的路徑為：

記深度相同的節(jié)點(diǎn)A、B的相似度為

0TA≠TB，depth為節(jié)點(diǎn)的深度，則任意兩個(gè)節(jié)點(diǎn)A、B的路徑的相似度可以定義為：

其中nA、nB分別表示節(jié)點(diǎn)A、B的深度。

通過對(duì)大量網(wǎng)頁的研究發(fā)現(xiàn)，正文內(nèi)容節(jié)點(diǎn)大都擁有共同的父節(jié)點(diǎn)或者祖父節(jié)點(diǎn)，取閾值Th=1-12depth(maxl)-2，其中，maxl為P中字符最多的節(jié)點(diǎn)；depth為節(jié)點(diǎn)深度，即路徑Pi中的元素個(gè)數(shù)。記集合P中字符最多的節(jié)點(diǎn)為L，與P中其他節(jié)點(diǎn)計(jì)算相似度，大于閾值的作為正文內(nèi)容。

3實(shí)驗(yàn)結(jié)果分析

本文從新浪、網(wǎng)易、搜狐、騰訊等大型門戶網(wǎng)站以及多家各類型網(wǎng)站中抽取了1 000個(gè)網(wǎng)頁作為測試數(shù)據(jù)，采用基于網(wǎng)頁DOM樹節(jié)點(diǎn)路徑相似度的正文抽取方法進(jìn)行實(shí)驗(yàn)，去噪結(jié)果和正文抽取結(jié)果如表1所示。

從表1的統(tǒng)計(jì)結(jié)果可以看出，有97.6%的網(wǎng)頁清洗掉了大部分的噪聲并且完整保留了網(wǎng)頁中的有效信息；對(duì)于新浪、網(wǎng)易等門戶網(wǎng)站的抽取結(jié)果較好，都有90%以上的準(zhǔn)確率和95%以上的召回率；對(duì)于其他不同結(jié)構(gòu)的網(wǎng)站，本文的正文抽取方法也都能適用，很好地實(shí)現(xiàn)了網(wǎng)頁正文抽取的工作，并且有著較高的準(zhǔn)確率和召回率。

為了驗(yàn)證本文方法的有效性，以上述的1 000個(gè)網(wǎng)頁作為樣本，將本文方法與BTE、DSC、FE、LQF、CCB等算法進(jìn)行對(duì)比實(shí)驗(yàn),實(shí)驗(yàn)結(jié)果如表2所示。

由表2可以看出，本文提出的方法相對(duì)于現(xiàn)有的統(tǒng)計(jì)方法有更好的準(zhǔn)確率和召回率。

互聯(lián)網(wǎng)的發(fā)展為用戶帶來了一個(gè)包含豐富信息的巨型數(shù)據(jù)庫，但是如何識(shí)別其中的有效數(shù)據(jù)是應(yīng)用的關(guān)鍵。本文的正文抽取方法利用網(wǎng)頁DOM樹節(jié)點(diǎn)路徑相似的特點(diǎn)實(shí)現(xiàn)正文抽取，為之后的數(shù)據(jù)分類、分析等工作奠定了基礎(chǔ)。

4結(jié)論

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

參考文獻(xiàn)

［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］劉利, 戴齊, 尹紅風(fēng),等. 基于多特征融合的網(wǎng)頁正文信息抽取［J］. 計(jì)算機(jī)應(yīng)用與軟件, 2014, 31(7):47-49.

［14］王利, 劉宗田, 王燕華,等. 基于內(nèi)容相似度的網(wǎng)頁正文提取［J］. 計(jì)算機(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會(huì)員年終大福利！

一個(gè)HTML文檔都會(huì)被瀏覽器解析轉(zhuǎn)化出一個(gè)Dom樹,Dom樹中的每一項(xiàng)根據(jù)DOM模型解析為樹形結(jié)構(gòu)中一個(gè)個(gè)的節(jié)點(diǎn),程序員就可以通過JavaScript語言動(dòng)態(tài)操作每一個(gè)節(jié)點(diǎn),此節(jié)主要了解掌握一些有關(guān)節(jié)點(diǎn)的知識(shí)和使用方法

之前說過使用document的方法可以快速獲取元素節(jié)點(diǎn)如下:

1 快速獲取HTML中的節(jié)點(diǎn)(主要是元素節(jié)點(diǎn))

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

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

1.3 document.getElementsByTagName()根據(jù)指定的標(biāo)簽名稱獲得其元素?cái)?shù)組

1.4 document.getElementsByClassName()獲取所有指定類名的元素?cái)?shù)組

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

在一個(gè)HTML網(wǎng)頁的Dom樹中會(huì)有很多的節(jié)點(diǎn),當(dāng)操作具體的節(jié)點(diǎn)時(shí),可以通過節(jié)點(diǎn)屬性的方式快速便捷獲取指定節(jié)點(diǎn)進(jìn)行增刪改查等操作

2 通過節(jié)點(diǎn)的屬性獲取相關(guān)的節(jié)點(diǎn)

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

2.1 獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn) parentNode

每一個(gè)節(jié)點(diǎn)都有一個(gè)parentNode屬性用于獲取當(dāng)前節(jié)點(diǎn)(多為獲取當(dāng)前元素節(jié)點(diǎn))的父節(jié)點(diǎn),如果不存在，則返回null

獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)方式為:當(dāng)前節(jié)點(diǎn).parentNode;如果想獲取其"爺爺"輩的節(jié)點(diǎn)只能在其后面再加個(gè)點(diǎn)parentNode,再往上再加以此類推

獲取父節(jié)點(diǎn)

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

2.2 獲取當(dāng)前節(jié)點(diǎn)的子級(jí)節(jié)點(diǎn) childNodes

獲取當(dāng)前節(jié)點(diǎn)的子級(jí)節(jié)點(diǎn),childNodes只獲取當(dāng)前節(jié)點(diǎn)的第一層子節(jié)點(diǎn),是一個(gè)只讀的數(shù)組NodeList對(duì)象即節(jié)點(diǎn)對(duì)象的數(shù)組,可以通過循環(huán)遍歷其子節(jié)點(diǎn)

獲取方式當(dāng)前節(jié)點(diǎn).childNodes 注意:獲取的節(jié)點(diǎn)中會(huì)有空文本節(jié)點(diǎn)

獲取子級(jí)節(jié)點(diǎn)

通過IE瀏覽器可以查看其空文本節(jié)點(diǎn)

以下幾種方式獲取的節(jié)點(diǎn)有可能是空文本節(jié)點(diǎn)

2.3firstChild與lastChild

獲取當(dāng)前節(jié)點(diǎn)子級(jí)節(jié)點(diǎn)的第一個(gè)(childNodes[0])或最后一個(gè)的節(jié)點(diǎn)(childNodes[length-1])

獲取當(dāng)前節(jié)點(diǎn)下的首尾節(jié)點(diǎn)

2.4 nextSibling

· 獲取當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)

2.5 previousSibling

獲取當(dāng)前節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)

獲取上下兄弟節(jié)點(diǎn)

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商