當(dāng)前位置：首頁 > 學(xué)習(xí)>正文
js的DOM操作整理 -- JavaScript之Dom教程（經(jīng)典）
來源：https://www.cnblogs.com/shihaiying/p/11724361.html
一、總結(jié)
一句話總結(jié)：
dom操作有用原生js的dom操作，也可以用對js封裝過的jquery等插件來更加方便的進(jìn)行dom操作
1、dom是什么？
對于JavaScript，為了能夠使JavaScript操作Html，JavaScript就有了一套自己的dom編程接口。
對于Html，dom使得html形成一棵dom樹，類似于一顆家族樹一樣，一層接一層，子子孫孫。
2、Html的DOM樹是什么？
HTML中的每個(gè)標(biāo)簽元素，屬性，文本都能看做是一個(gè)DOM的節(jié)點(diǎn)，這些dom節(jié)點(diǎn)構(gòu)成了一個(gè)樹形結(jié)構(gòu)
3、原生的dom操作指的是什么？
就是用原生的js進(jìn)行的操作，相對的就是非原生操作，比如用jquery操作dom
二、DOM操作基礎(chǔ)介紹
轉(zhuǎn)自或參考：JavaScript--淺談DOM操作
https://www.cnblogs.com/Ry-yuan/p/6918155.html
1.理解DOM：
DOM（Document Object Model ，文檔對象模型）一種獨(dú)立于語言，用于操作xml，html文檔的應(yīng)用編程接口。
怎么說，我從兩個(gè)角度理解：
對于JavaScript，為了能夠使JavaScript操作Html，JavaScript就有了一套自己的dom編程接口。
對于Html，dom使得html形成一棵dom樹，類似于一顆家族樹一樣，一層接一層，子子孫孫。
2.介紹Html的DOM樹：
說明：html標(biāo)簽通過瀏覽器的解析后才會(huì)形成dom樹，此后HTML中的每個(gè)標(biāo)簽元素，屬性，文本都能看做是一個(gè)DOM的節(jié)點(diǎn)，JavaScript都能通過dom的提供的編程接口操作到每個(gè)節(jié)點(diǎn)，去了解瀏覽器的渲染機(jī)制能夠幫助我們了解dom。
Html代碼：
復(fù)制代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom</title>
</head>
<body>
<div>
<a href="www.baidu.com">百度</a>
</div>
</body>
</html>
復(fù)制代碼
對應(yīng)的DOM樹結(jié)構(gòu)圖：
3.認(rèn)識(shí)JavaScript中的DOM編程接口：
上面說了html形成的dom樹，接著說下通過js的dom編程接口去操作這棵dom樹。
JavaScriptDOM操作的常用方法和屬性：:
常用方法:
獲取節(jié)點(diǎn)：
document.getElementById(idName) //通過id號(hào)來獲取元素，返回一個(gè)元素對象
document.getElementsByName(name) //通過name屬性獲取id號(hào)，返回元素對象數(shù)組
document.getElementsByClassName(className) //通過class來獲取元素，返回元素對象數(shù)組（ie8以上才有）
document.getElementsByTagName(tagName) //通過標(biāo)簽名獲取元素，返回元素對象數(shù)組
獲取/設(shè)置元素的屬性值：
element.getAttribute(attributeName) //括號(hào)傳入屬性名，返回對應(yīng)屬性的屬性值
element.setAttribute(attributeName,attributeValue) //傳入屬性名及設(shè)置的值
創(chuàng)建節(jié)點(diǎn)Node：
document.createElement("h3") //創(chuàng)建一個(gè)html元素，這里以創(chuàng)建h3元素為例
document.createTextNode(String); //創(chuàng)建一個(gè)文本節(jié)點(diǎn)；
document.createAttribute("class"); //創(chuàng)建一個(gè)屬性節(jié)點(diǎn)，這里以創(chuàng)建class屬性為例
增添節(jié)點(diǎn)：
element.appendChild(Node); //往element內(nèi)部最后面添加一個(gè)節(jié)點(diǎn)，參數(shù)是節(jié)點(diǎn)類型
elelment.insertBefore(newNode,existingNode); //在element內(nèi)部的中在existingNode前面插入newNode
刪除節(jié)點(diǎn)：
element.removeChild(Node) //刪除當(dāng)前節(jié)點(diǎn)下指定的子節(jié)點(diǎn)，刪除成功返回該被刪除的節(jié)點(diǎn)，否則返回null
常用屬性:
獲取當(dāng)前元素的父節(jié)點(diǎn) ：
element.parentNode //返回當(dāng)前元素的父節(jié)點(diǎn)對象
獲取當(dāng)前元素的子節(jié)點(diǎn)：
element.chlidren //返回當(dāng)前元素所有子元素節(jié)點(diǎn)對象，只返回HTML節(jié)點(diǎn)
element.chilidNodes //返回當(dāng)前元素多有子節(jié)點(diǎn)，包括文本，HTML，屬性節(jié)點(diǎn)。（回車也會(huì)當(dāng)做一個(gè)節(jié)點(diǎn)）
element.firstChild //返回當(dāng)前元素的第一個(gè)子節(jié)點(diǎn)對象
element.lastChild //返回當(dāng)前元素的最后一個(gè)子節(jié)點(diǎn)對象
獲取當(dāng)前元素的同級(jí)元素：
element.nextSibling //返回當(dāng)前元素的下一個(gè)同級(jí)元素 沒有就返回null
element.previousSibling //返回當(dāng)前元素上一個(gè)同級(jí)元素 沒有就返回null
獲取當(dāng)前元素的文本：
element.innerHTML //返回元素的所有文本，包括html代碼
element.innerText //返回當(dāng)前元素的自身及子代所有文本值，只是文本內(nèi)容，不包括html代碼
獲取當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)類型：node.nodeType //返回節(jié)點(diǎn)的類型,數(shù)字形式（1-12）常見幾個(gè)1：元素節(jié)點(diǎn)，2：屬性節(jié)點(diǎn)，3：文本節(jié)點(diǎn)。
設(shè)置樣式：element.style.color=“#eea”; //設(shè)置元素的樣式時(shí)使用style，這里以設(shè)置文字顏色為例。
4.總結(jié)：
大家都會(huì)覺得用jQuery來操作dom會(huì)更加的方便且好用，因?yàn)閖q對js的dom進(jìn)行了封裝，使得我們Write Less, Do More。但是我覺得還是要總結(jié)一下原生js的dom，從根本上了解js對dom的操作，只會(huì)有利而無害。
三、js操作dom的講解及實(shí)例
1.認(rèn)識(shí)DOM
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）。
先來看看下面代碼:
將HTML代碼分解為DOM節(jié)點(diǎn)層次圖:
HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合，DOM節(jié)點(diǎn)有:
1. 元素節(jié)點(diǎn)：上圖中<html>、<body>、<p>等都是元素節(jié)點(diǎn)，即標(biāo)簽。
2. 文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節(jié)點(diǎn):元素屬性，如<a>標(biāo)簽的鏈接屬性href="http://www.imooc.com"。
節(jié)點(diǎn)屬性:
遍歷節(jié)點(diǎn)樹:
以上圖ul為例，它的父級(jí)節(jié)點(diǎn)body,它的子節(jié)點(diǎn)3個(gè)li,它的兄弟結(jié)點(diǎn)h2、P。
DOM操作:
注意:前兩個(gè)是document方法。
2.getElementsByName()方法
返回帶有指定名稱的節(jié)點(diǎn)對象的集合。
語法：
document.getElementsByName(name)
與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。
注意:
1. 因?yàn)槲臋n中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數(shù)組，而不是一個(gè)元素。
2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，從0開始。
看看下面的代碼:
運(yùn)行結(jié)果:
3.getElementsByTagName()方法
返回帶有指定標(biāo)簽名的節(jié)點(diǎn)對象的集合。返回元素的順序是它們在文檔中的順序。
語法:
document.getElementsByTagName(Tagname)
說明:
1. Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。
2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，所以從0開始。
看看下面代碼，通過getElementsByTagName()獲取節(jié)點(diǎn)。
4.區(qū)別getElementByID,getElementsByName,getElementsByTagName
以人來舉例說明，人有能標(biāo)識(shí)身份的身份證，有姓名，有類別(大人、小孩、老人)等。
1. ID 是一個(gè)人的身份證號(hào)碼，是唯一的。所以通過getElementById獲取的是指定的一個(gè)人。
2. Name 是他的名字，可以重復(fù)。所以通過getElementsByName獲取名字相同的人集合。
3. TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。
把上面的例子轉(zhuǎn)換到HTML中，如下:
<input type="checkbox" name="hobby" id="hobby1"> 音樂
input標(biāo)簽就像人的類別。
name屬性就像人的姓名。
id屬性就像人的身份證。
方法總結(jié)如下:
注意：方法區(qū)分大小寫
通過下面的例子(6個(gè)name="hobby"的復(fù)選項(xiàng)，兩個(gè)按鈕)來區(qū)分三種方法的不同:
<input type="checkbox" name="hobby" id="hobby1"> 音樂
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 閱讀
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步
<input type="button" value = "全選" id="button1">
<input type="button" value = "全不選" id="button1">
1. document.getElementsByTagName("input")，結(jié)果為獲取所有標(biāo)簽為input的元素，共8個(gè)。
2. document.getElementsByName("hobby")，結(jié)果為獲取屬性name="hobby"的元素，共6個(gè)。
3. document.getElementById("hobby6")，結(jié)果為獲取屬性id="hobby6"的元素，只有一個(gè)，"跑步"這個(gè)復(fù)選項(xiàng)。
5.getAttribute()方法
通過元素節(jié)點(diǎn)的屬性名稱獲取屬性的值。
語法：
elementNode.getAttribute(name)
說明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節(jié)點(diǎn)。
2. name：要想查詢的元素節(jié)點(diǎn)的屬性名字
看看下面的代碼，獲取h1標(biāo)簽的屬性值：
運(yùn)行結(jié)果:
h1標(biāo)簽的ID ：alink
h1標(biāo)簽的title ：getAttribute()獲取標(biāo)簽的屬值
6.setAttribute()方法
setAttribute() 方法增加一個(gè)指定名稱和值的新屬性，或者把一個(gè)現(xiàn)有的屬性設(shè)定為指定的值。
語法：
elementNode.setAttribute(name,value)
說明：
1.name: 要設(shè)置的屬性名。
2.value: 要設(shè)置的屬性值。
注意：
1.把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性，該方法將創(chuàng)建一個(gè)新屬性。
2.類似于getAttribute()方法，setAttribute()方法只能通過元素節(jié)點(diǎn)對象調(diào)用的函數(shù)。
7.節(jié)點(diǎn)屬性
在文檔對象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對象。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 ：
1. nodeName : 節(jié)點(diǎn)的名稱
2. nodeValue ：節(jié)點(diǎn)的值
3. nodeType ：節(jié)點(diǎn)的類型
一、nodeName 屬性: 節(jié)點(diǎn)的名稱，是只讀的。
1. 元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
2. 屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱
3. 文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
4. 文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
二、nodeValue 屬性：節(jié)點(diǎn)的值
1. 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
2. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
3. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值
三、nodeType 屬性: 節(jié)點(diǎn)的類型，是只讀的。以下常用的幾種結(jié)點(diǎn)類型:
元素類型 節(jié)點(diǎn)類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9
8.訪問子結(jié)點(diǎn)childNodes
訪問選定元素節(jié)點(diǎn)下的所有子節(jié)點(diǎn)的列表，返回的值可以看作是一個(gè)數(shù)組，他具有l(wèi)ength屬性。
語法：
elementNode.childNodes
注意：
如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則該屬性返回不包含節(jié)點(diǎn)的 NodeList。
我們來看看下面的代碼:
運(yùn)行結(jié)果:
IE:
UL子節(jié)點(diǎn)個(gè)數(shù):3
節(jié)點(diǎn)類型:1
其它瀏覽器:
UL子節(jié)點(diǎn)個(gè)數(shù):7
節(jié)點(diǎn)類型:3
注意:
1. IE全系列、firefox、chrome、opera、safari兼容問題
2. 節(jié)點(diǎn)之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節(jié)點(diǎn)，所以IE是3，其它瀏覽器是7，如下圖所示:
如果把代碼改成這樣:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
運(yùn)行結(jié)果:（IE和其它瀏覽器結(jié)果是一樣的）
UL子節(jié)點(diǎn)個(gè)數(shù):3
節(jié)點(diǎn)類型:1
9.訪問子結(jié)點(diǎn)的第一和最后項(xiàng)
一、firstChild 屬性返回‘childNodes’數(shù)組的第一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則該屬性返回 NULL。
語法：
node.firstChild
說明：與elementNode.childNodes[0]是同樣的效果。
二、 lastChild 屬性返回‘childNodes’數(shù)組的最后一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則該屬性返回 NULL。
語法：
node.lastChild
說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
注意: 上一節(jié)中，我們知道Internet Explorer 會(huì)忽略節(jié)點(diǎn)之間生成的空白文本節(jié)點(diǎn)，而其它瀏覽器不會(huì)。我們可以通過檢測節(jié)點(diǎn)類型，過濾子節(jié)點(diǎn)。
10.訪問父節(jié)點(diǎn)parentNode
獲取指定節(jié)點(diǎn)的父節(jié)點(diǎn)
語法：
elementNode.parentNode
注意:父節(jié)點(diǎn)只能有一個(gè)。
看看下面的例子,獲取 P 節(jié)點(diǎn)的父節(jié)點(diǎn)，代碼如下:
<div id="text">
<p id="con"> parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script>
運(yùn)行結(jié)果:
parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)
DIV
訪問祖節(jié)點(diǎn):
elementNode.parentNode.parentNode
看看下面的代碼:
<div id="text">
<p>
parentNode
<span id="con"> 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)</span>
</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.parentNode.nodeName);
</script>
運(yùn)行結(jié)果:
parentNode獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)
DIV
注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標(biāo)簽之間的空白也算是一個(gè)文本節(jié)點(diǎn)。
11.訪問兄弟節(jié)點(diǎn)
1. nextSibling 屬性可返回某個(gè)節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)（處于同一樹層級(jí)中）。
語法：
nodeObject.nextSibling
說明：如果無此節(jié)點(diǎn)，則該屬性返回 null。
2. previousSibling 屬性可返回某個(gè)節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)（處于同一樹層級(jí)中）。
語法：
nodeObject.previousSibling
說明：如果無此節(jié)點(diǎn)，則該屬性返回 null。
注意: 兩個(gè)屬性獲取的是節(jié)點(diǎn)。Internet Explorer 會(huì)忽略節(jié)點(diǎn)間生成的空白文本節(jié)點(diǎn)（例如，換行符號(hào)），而其它瀏覽器不會(huì)忽略。
解決問題方法:
判斷節(jié)點(diǎn)nodeType是否為1, 如是為元素節(jié)點(diǎn)，跳過。
運(yùn)行結(jié)果:
LI = javascript
nextsibling: LI = jquery
12.插入節(jié)點(diǎn)appendChild()
在指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)列表之后添加一個(gè)新的子節(jié)點(diǎn)。
語法:
appendChild(newnode)
參數(shù):
newnode：指定追加的節(jié)點(diǎn)。
我們來看看，div標(biāo)簽內(nèi)創(chuàng)建一個(gè)新的 P 標(biāo)簽，代碼如下:
運(yùn)行結(jié)果:
HTML
JavaScript
This is a new p
13.插入節(jié)點(diǎn)insertBefore()
insertBefore() 方法可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。
語法:
insertBefore(newnode,node);
參數(shù):
newnode: 要插入的新節(jié)點(diǎn)。
node: 指定此節(jié)點(diǎn)前插入節(jié)點(diǎn)。
我們在來看看下面代碼，在指定節(jié)點(diǎn)前插入節(jié)點(diǎn)。
運(yùn)行結(jié)果:
This is a new p
JavaScript
HTML
注意: otest.insertBefore(newnode,node); 也可以改為: otest.insertBefore(newnode,otest.childNodes[0]);
14.刪除節(jié)點(diǎn)removeChild()
removeChild() 方法從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)。如刪除成功，此方法可返回被刪除的節(jié)點(diǎn)，如失敗，則返回 NULL。
語法:
nodeObject.removeChild(node)
參數(shù):
node ：必需，指定需要?jiǎng)h除的節(jié)點(diǎn)。
我們來看看下面代碼，刪除子點(diǎn)。
運(yùn)行結(jié)果:
HTML
刪除節(jié)點(diǎn)的內(nèi)容: javascript
注意: 把刪除的子節(jié)點(diǎn)賦值給 x，這個(gè)子節(jié)點(diǎn)不在DOM樹中，但是還存在內(nèi)存中，可通過 x 操作。
如果要完全刪除對象，給 x 賦 null 值，代碼如下:
15.替換元素節(jié)點(diǎn)replaceChild()
replaceChild 實(shí)現(xiàn)子節(jié)點(diǎn)(對象)的替換。返回被替換對象的引用。
語法：
node.replaceChild (newnode,oldnew )
參數(shù)：
newnode : 必需，用于替換 oldnew 的對象。
oldnew : 必需，被 newnode 替換的對象。
我們來看看下面的代碼:
效果: 將文檔中的 Java 改為 JavaScript。
注意:
1. 當(dāng) oldnode 被替換時(shí)，所有與之相關(guān)的屬性內(nèi)容都將被移除。
2. newnode 必須先被建立。
16.創(chuàng)建元素節(jié)點(diǎn)createElement
createElement()方法可創(chuàng)建元素節(jié)點(diǎn)。此方法可返回一個(gè) Element 對象。
語法：
document.createElement(tagName)
參數(shù):
tagName：字符串值，這個(gè)字符串用來指明創(chuàng)建元素的類型。
注意：要與appendChild() 或 insertBefore()方法聯(lián)合使用，將元素顯示在頁面中。
我們來創(chuàng)建一個(gè)按鈕，代碼如下：
<script type="text/javascript">
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "創(chuàng)建一個(gè)按鈕";
body.appendChild(input);
</script>
效果：在HTML文檔中，創(chuàng)建一個(gè)按鈕。
我們也可以使用setAttribute來設(shè)置屬性，代碼如下：
<script type="text/javascript">
var body= document.body;
var btn = document.createElement("input");
btn.setAttribute("type", "text");
btn.setAttribute("name", "q");
btn.setAttribute("value", "使用setAttribute");
btn.setAttribute("onclick", "javascript:alert('This is a text!');");
body.appendChild(btn);
</script>
效果：在HTML文檔中，創(chuàng)建一個(gè)文本框，使用setAttribute設(shè)置屬性值。 當(dāng)點(diǎn)擊這個(gè)文本框時(shí)，會(huì)彈出對話框“This is a text!”。
17.創(chuàng)建文本節(jié)點(diǎn)createTextNode
createTextNode() 方法創(chuàng)建新的文本節(jié)點(diǎn)，返回新創(chuàng)建的 Text 節(jié)點(diǎn)。
語法：
document.createTextNode(data)
參數(shù)：
data : 字符串值，可規(guī)定此節(jié)點(diǎn)的文本。
我們來創(chuàng)建一個(gè)<div>元素并向其中添加一條消息，代碼如下：
運(yùn)行結(jié)果:
18.瀏覽器窗口可視區(qū)域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動(dòng)條）的方法:
一、對于IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 瀏覽器窗口的內(nèi)部高度
• window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
二、對于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。
• document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。
或者
Document對象的body屬性對應(yīng)HTML文檔的<body>標(biāo)簽
• document.body.clientHeight
• document.body.clientWidth
在不同瀏覽器都實(shí)用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
19.網(wǎng)頁尺寸scrollHeight
scrollHeight和scrollWidth，獲取網(wǎng)頁內(nèi)容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。
二、針對NS、FF:
scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。也就是說網(wǎng)頁內(nèi)容實(shí)際高度小于 clientHeight 時(shí)，scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
注意:區(qū)分大小寫
scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實(shí)際占用的高度和寬度。
20.網(wǎng)頁尺寸offsetHeight
offsetHeight和offsetWidth，獲取網(wǎng)頁內(nèi)容高度和寬度(包括滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
21.網(wǎng)頁卷去的距離與偏移量
我們先來看看下面的圖：
scrollLeft:設(shè)置或獲取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離 ，即左邊灰色的內(nèi)容。
scrollTop:設(shè)置或獲取位于對象最頂端與窗口中可見內(nèi)容的最頂端之間的距離 ，即上邊灰色的內(nèi)容。
offsetLeft:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置 。
offsetTop:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算頂端位置 。
注意:
1. 區(qū)分大小寫
2. offsetParent：布局中設(shè)置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節(jié)點(diǎn)開始，一層層向上找，直到HTML的body。
五、JS學(xué)習(xí)之DOM及案例
轉(zhuǎn)自或參考：JS學(xué)習(xí)之DOM及案例
https://blog.csdn.net/huangql517/article/details/80476171
1、DOM簡介
當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對象模型（Document Object Model，簡稱DOM）。
即當(dāng)瀏覽器載入HTML文檔時(shí), 它就會(huì)成為DOM對象，而在JS中，所有的事物都是節(jié)點(diǎn)，
元素、文本等都是節(jié)點(diǎn)?？梢酝ㄟ^節(jié)點(diǎn)進(jìn)行DOM對象的增刪改查。
既然HTML在被瀏覽器加載時(shí)會(huì)對應(yīng)的生成DOM對象，而JS又可以通過節(jié)點(diǎn)來操作DOM，所以，JS
完全可以創(chuàng)建動(dòng)態(tài)的HTML，
看一下實(shí)際當(dāng)中的一些場景，js是怎么處理的，案例如下。
2、先來點(diǎn)語法
2.1、獲取DOM節(jié)點(diǎn)的方法
//通過id獲取，唯一的
var oDiv = document.getElementById('box');
//通過類名獲取，返回?cái)?shù)組形式，所以可以加索引取值
var oDiv = document.getElementsByClassName('.box')[0];
//通過標(biāo)簽名獲取
var oDiv = document.getElementsByTagName('div')[0];
2.2、常用的DOM節(jié)點(diǎn)
2.3、節(jié)點(diǎn)的增刪改查
// 刪除元素上的class屬性
oH2.removeAttribute('class');
// 刪除創(chuàng)建的DOM對象
oDiv.removeChild(oH2);
// 父節(jié)點(diǎn).replaceChild(新節(jié)點(diǎn),子節(jié)點(diǎn)) 用新節(jié)點(diǎn)替換某個(gè)子節(jié)點(diǎn)
var op = document.createElement('p');
op.innerText = '我是一個(gè)段落';
oDiv.replaceChild(op,oH2);
3、模態(tài)框案例
// 獲取dom元素
var btn = document.getElementById('btn');
// 1、創(chuàng)建divdom元素
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');
// 2、設(shè)置各dom元素的屬性，方便后續(xù)定位操作，寫樣式等
oDiv.id = 'box';
oP.id = 'content';
oSpan.id = 'span1';
oP.innerHTML = '模態(tài)框成功彈出';
oSpan.innerHTML = '關(guān)閉';
// 3、部署dom元素，理清層級(jí)關(guān)系
oDiv.appendChild(oP);
oP.appendChild(oSpan);
//給按鈕添加點(diǎn)擊事件
btn.onclick = function(){
//動(dòng)態(tài)的添加到一個(gè)div到body中，并且在btn前面
console.log(this);//當(dāng)前this指向的是當(dāng)前按鈕元素
this.parentNode.insertBefore(oDiv,btn);
};
//點(diǎn)擊span標(biāo)簽就觸發(fā)刪除節(jié)點(diǎn)函數(shù)，刪除整個(gè)div塊
oSpan.onclick = function(){
// removeChild()刪除節(jié)點(diǎn)
oDiv.parentNode.removeChild(oDiv)
}
樣式自己設(shè)置下，最終效果如下，頁面首先展示一個(gè)button按鈕，點(diǎn)擊彈出模態(tài)框（div塊>p標(biāo)簽>span標(biāo)簽），
再點(diǎn)擊span（關(guān)閉），則刪除div塊，回到頁面初始的樣子，
4、點(diǎn)擊有驚喜案例
<style>
#box{
width: 200px;
height: 200px;
background-color: green;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
點(diǎn)擊有驚喜
</div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
console.log(box);
var n=0;
box.onclick = function(){
n++;
if(n%4==1){
this.style.backgroundColor='blue';
this.innerText = '2222'
}else if(n%4==2){
this.style.backgroundColor='red';
this.innerText = '3333'
}else if(n%4==3){
this.style.backgroundColor='yellow';
this.innerText = '4444'
}else{
this.style.background = 'transparent';
this.innerText = '';
}
}
</script>
初始頁面有個(gè)div盒子，樣式已設(shè)置，js里面現(xiàn)在通過id找到dom元素，再通過一個(gè)自增n對4取余的結(jié)果來改變dom元素
屬性，比如上面的背景色和蚊子內(nèi)容，達(dá)到點(diǎn)擊一直切換的效果。
效果如下
六、jquery的dom操作實(shí)例
轉(zhuǎn)自或參考：DOM操作之屬性和樣式操作
https://www.cnblogs.com/yuyujuan/p/9410428.html
在DOM操作，除了前面的節(jié)點(diǎn)操作以外，常常被用到的操作還有屬性操作和節(jié)點(diǎn)操作，下面，主要來總結(jié)一下jQuery中的屬性操作方法和樣式操作方法。
在開始操作前，我們需要先在html中添加如下代碼，后面所有的操作都是基于該DOM結(jié)構(gòu)進(jìn)行的。
復(fù)制代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<style>
.red{
color:red;
}
.blue{
color:blue;
}
.yellow{
color:yellow;
}
</style>
</head>
<body>
<p title="選擇你最喜歡的水果">你最喜歡的水果是？</p>
<ul>
<li title='蘋果' class="red">蘋果</li>
<li title='香蕉'>香蕉</li>
<li title='荔枝'>荔枝</li>
</ul>
<script>
</script>
</body>
</html>
復(fù)制代碼
屬性操作
獲取和設(shè)置屬性
在前面我們提到過一個(gè)方法attr()，通過給該方法添加一個(gè)參數(shù)（屬性名稱），可以獲取相應(yīng)信息。
$(function(){
var txt = $("ul li:eq(1)").attr("title");
console.log(txt);
})
當(dāng)給該方法傳遞多個(gè)參數(shù)時(shí)，可以用來設(shè)置相關(guān)屬性。
$(function(){
$("ul li:eq(1)").attr("title","最喜歡的水果");
$("ul li:eq(2)").attr({"title":"水果","name":"荔枝"});
})
刪除屬性
在jQuery中，使用removeAttr()方法刪除某個(gè)元素的特點(diǎn)屬性。
$(function(){
$("p").removeAttr("title");
})
樣式操作
獲取和設(shè)置樣式
因?yàn)閏lass也是和title一樣，也屬于元素的屬性，所以，我們可以使用attr()來獲取和設(shè)置元素的class。
復(fù)制代碼
$(function(){
var txt1 = $("ul li:eq(0)").attr("class");
console.log(txt1);
$("ul li:eq(0)").attr("class","blue");
var txt2 = $("ul li:eq(0)").attr("class");
console.log(txt2);
})
復(fù)制代碼
使用attr()方法設(shè)置樣式時(shí)，新的樣式覆蓋了之前的樣式。
添加樣式
有的時(shí)候，我們希望為某個(gè)元素添加樣式，但是又不覆蓋之前原有的樣式，很明顯，attr()并不能滿足我們的要求，這個(gè)時(shí)候，我們需要用到一個(gè)新的方法addClass()，該方法是在不改變原有樣式的基礎(chǔ)上，在后面添加新的樣式。
復(fù)制代碼
$(function(){
var txt1 = $("ul li:eq(0)").attr("class");
console.log(txt1);
$("ul li:eq(0)").addClass("blue");
var txt2 = $("ul li:eq(0)").attr("class");
console.log(txt2);
})
復(fù)制代碼
移除樣式
在上面，我們知道可以用removeAttr()方法刪除元素的屬性，自然，這個(gè)方法可以用來刪除元素的樣式。
$(function(){
$("ul li:eq(0)").removeAttr("class");
})
除了刪除屬性的方法外，jQuery中，還有一個(gè)專門用來刪除元素樣式的方法：removeClass()，參數(shù)為需要?jiǎng)h除的類名，該方法可以同時(shí)刪除一個(gè)或多個(gè)樣式，多個(gè)類名中間用空格間隔即可，當(dāng)該方法不帶參數(shù)時(shí)，表明要?jiǎng)h除該元素的所有方法。
$(function(){
$("ul li:eq(0)").removeClass("red");
})
判斷是否含有某個(gè)樣式
hasClass()方法可以用來判斷元素中是否含有某個(gè)class，如果有，返回true，否則，返回false。
$(function(){
var txt1 = $("ul li:eq(0)").hasClass("red");
var txt2 = $("ul li:eq(1)").hasClass("red");
console.log(txt1);
console.log(txt2);
})
一、總結(jié)
一句話總結(jié)：
dom操作有用原生js的dom操作，也可以用對js封裝過的jquery等插件來更加方便的進(jìn)行dom操作
1、dom是什么？
對于JavaScript，為了能夠使JavaScript操作Html，JavaScript就有了一套自己的dom編程接口。
對于Html，dom使得html形成一棵dom樹，類似于一顆家族樹一樣，一層接一層，子子孫孫。
2、Html的DOM樹是什么？
HTML中的每個(gè)標(biāo)簽元素，屬性，文本都能看做是一個(gè)DOM的節(jié)點(diǎn)，這些dom節(jié)點(diǎn)構(gòu)成了一個(gè)樹形結(jié)構(gòu)
3、原生的dom操作指的是什么？
就是用原生的js進(jìn)行的操作，相對的就是非原生操作，比如用jquery操作dom
二、DOM操作基礎(chǔ)介紹
轉(zhuǎn)自或參考：JavaScript--淺談DOM操作
https://www.cnblogs.com/Ry-yuan/p/6918155.html
1.理解DOM：
DOM（Document Object Model ，文檔對象模型）一種獨(dú)立于語言，用于操作xml，html文檔的應(yīng)用編程接口。
怎么說，我從兩個(gè)角度理解：
對于JavaScript，為了能夠使JavaScript操作Html，JavaScript就有了一套自己的dom編程接口。
對于Html，dom使得html形成一棵dom樹，類似于一顆家族樹一樣，一層接一層，子子孫孫。
2.介紹Html的DOM樹：
說明：html標(biāo)簽通過瀏覽器的解析后才會(huì)形成dom樹，此后HTML中的每個(gè)標(biāo)簽元素，屬性，文本都能看做是一個(gè)DOM的節(jié)點(diǎn)，JavaScript都能通過dom的提供的編程接口操作到每個(gè)節(jié)點(diǎn)，去了解瀏覽器的渲染機(jī)制能夠幫助我們了解dom。
Html代碼：
復(fù)制代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom</title>
</head>
<body>
<div>
<a href="www.baidu.com">百度</a>
</div>
</body>
</html>
復(fù)制代碼
對應(yīng)的DOM樹結(jié)構(gòu)圖：
3.認(rèn)識(shí)JavaScript中的DOM編程接口：
上面說了html形成的dom樹，接著說下通過js的dom編程接口去操作這棵dom樹。
JavaScriptDOM操作的常用方法和屬性：:
常用方法:
獲取節(jié)點(diǎn)：
document.getElementById(idName) //通過id號(hào)來獲取元素，返回一個(gè)元素對象
document.getElementsByName(name) //通過name屬性獲取id號(hào)，返回元素對象數(shù)組
document.getElementsByClassName(className) //通過class來獲取元素，返回元素對象數(shù)組（ie8以上才有）
document.getElementsByTagName(tagName) //通過標(biāo)簽名獲取元素，返回元素對象數(shù)組
獲取/設(shè)置元素的屬性值：
element.getAttribute(attributeName) //括號(hào)傳入屬性名，返回對應(yīng)屬性的屬性值
element.setAttribute(attributeName,attributeValue) //傳入屬性名及設(shè)置的值
創(chuàng)建節(jié)點(diǎn)Node：
document.createElement("h3") //創(chuàng)建一個(gè)html元素，這里以創(chuàng)建h3元素為例
document.createTextNode(String); //創(chuàng)建一個(gè)文本節(jié)點(diǎn)；
document.createAttribute("class"); //創(chuàng)建一個(gè)屬性節(jié)點(diǎn)，這里以創(chuàng)建class屬性為例
增添節(jié)點(diǎn)：
element.appendChild(Node); //往element內(nèi)部最后面添加一個(gè)節(jié)點(diǎn)，參數(shù)是節(jié)點(diǎn)類型
elelment.insertBefore(newNode,existingNode); //在element內(nèi)部的中在existingNode前面插入newNode
刪除節(jié)點(diǎn)：
element.removeChild(Node) //刪除當(dāng)前節(jié)點(diǎn)下指定的子節(jié)點(diǎn)，刪除成功返回該被刪除的節(jié)點(diǎn)，否則返回null
常用屬性:
獲取當(dāng)前元素的父節(jié)點(diǎn) ：
element.parentNode //返回當(dāng)前元素的父節(jié)點(diǎn)對象
獲取當(dāng)前元素的子節(jié)點(diǎn)：
element.chlidren //返回當(dāng)前元素所有子元素節(jié)點(diǎn)對象，只返回HTML節(jié)點(diǎn)
element.chilidNodes //返回當(dāng)前元素多有子節(jié)點(diǎn)，包括文本，HTML，屬性節(jié)點(diǎn)。（回車也會(huì)當(dāng)做一個(gè)節(jié)點(diǎn)）
element.firstChild //返回當(dāng)前元素的第一個(gè)子節(jié)點(diǎn)對象
element.lastChild //返回當(dāng)前元素的最后一個(gè)子節(jié)點(diǎn)對象
獲取當(dāng)前元素的同級(jí)元素：
element.nextSibling //返回當(dāng)前元素的下一個(gè)同級(jí)元素 沒有就返回null
element.previousSibling //返回當(dāng)前元素上一個(gè)同級(jí)元素 沒有就返回null
獲取當(dāng)前元素的文本：
element.innerHTML //返回元素的所有文本，包括html代碼
element.innerText //返回當(dāng)前元素的自身及子代所有文本值，只是文本內(nèi)容，不包括html代碼
獲取當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)類型：node.nodeType //返回節(jié)點(diǎn)的類型,數(shù)字形式（1-12）常見幾個(gè)1：元素節(jié)點(diǎn)，2：屬性節(jié)點(diǎn)，3：文本節(jié)點(diǎn)。
設(shè)置樣式：element.style.color=“#eea”; //設(shè)置元素的樣式時(shí)使用style，這里以設(shè)置文字顏色為例。
4.總結(jié)：
大家都會(huì)覺得用jQuery來操作dom會(huì)更加的方便且好用，因?yàn)閖q對js的dom進(jìn)行了封裝，使得我們Write Less, Do More。但是我覺得還是要總結(jié)一下原生js的dom，從根本上了解js對dom的操作，只會(huì)有利而無害。
三、js操作dom的講解及實(shí)例
1.認(rèn)識(shí)DOM
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）。
先來看看下面代碼:
將HTML代碼分解為DOM節(jié)點(diǎn)層次圖:
HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合，DOM節(jié)點(diǎn)有:
1. 元素節(jié)點(diǎn)：上圖中<html>、<body>、<p>等都是元素節(jié)點(diǎn)，即標(biāo)簽。
2. 文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節(jié)點(diǎn):元素屬性，如<a>標(biāo)簽的鏈接屬性href="http://www.imooc.com"。
節(jié)點(diǎn)屬性:
遍歷節(jié)點(diǎn)樹:
以上圖ul為例，它的父級(jí)節(jié)點(diǎn)body,它的子節(jié)點(diǎn)3個(gè)li,它的兄弟結(jié)點(diǎn)h2、P。
DOM操作:
注意:前兩個(gè)是document方法。
2.getElementsByName()方法
返回帶有指定名稱的節(jié)點(diǎn)對象的集合。
語法：
document.getElementsByName(name)
與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。
注意:
1. 因?yàn)槲臋n中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數(shù)組，而不是一個(gè)元素。
2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，從0開始。
看看下面的代碼:
運(yùn)行結(jié)果:
3.getElementsByTagName()方法
返回帶有指定標(biāo)簽名的節(jié)點(diǎn)對象的集合。返回元素的順序是它們在文檔中的順序。
語法:
document.getElementsByTagName(Tagname)
說明:
1. Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。
2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，所以從0開始。
看看下面代碼，通過getElementsByTagName()獲取節(jié)點(diǎn)。
4.區(qū)別getElementByID,getElementsByName,getElementsByTagName
以人來舉例說明，人有能標(biāo)識(shí)身份的身份證，有姓名，有類別(大人、小孩、老人)等。
1. ID 是一個(gè)人的身份證號(hào)碼，是唯一的。所以通過getElementById獲取的是指定的一個(gè)人。
2. Name 是他的名字，可以重復(fù)。所以通過getElementsByName獲取名字相同的人集合。
3. TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。
把上面的例子轉(zhuǎn)換到HTML中，如下:
<input type="checkbox" name="hobby" id="hobby1"> 音樂
input標(biāo)簽就像人的類別。
name屬性就像人的姓名。
id屬性就像人的身份證。
方法總結(jié)如下:
注意：方法區(qū)分大小寫
通過下面的例子(6個(gè)name="hobby"的復(fù)選項(xiàng)，兩個(gè)按鈕)來區(qū)分三種方法的不同:
<input type="checkbox" name="hobby" id="hobby1"> 音樂
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 閱讀
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步
<input type="button" value = "全選" id="button1">
<input type="button" value = "全不選" id="button1">
1. document.getElementsByTagName("input")，結(jié)果為獲取所有標(biāo)簽為input的元素，共8個(gè)。
2. document.getElementsByName("hobby")，結(jié)果為獲取屬性name="hobby"的元素，共6個(gè)。
3. document.getElementById("hobby6")，結(jié)果為獲取屬性id="hobby6"的元素，只有一個(gè)，"跑步"這個(gè)復(fù)選項(xiàng)。
5.getAttribute()方法
通過元素節(jié)點(diǎn)的屬性名稱獲取屬性的值。
語法：
elementNode.getAttribute(name)
說明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節(jié)點(diǎn)。
2. name：要想查詢的元素節(jié)點(diǎn)的屬性名字
看看下面的代碼，獲取h1標(biāo)簽的屬性值：
運(yùn)行結(jié)果:
h1標(biāo)簽的ID ：alink
h1標(biāo)簽的title ：getAttribute()獲取標(biāo)簽的屬值
6.setAttribute()方法
setAttribute() 方法增加一個(gè)指定名稱和值的新屬性，或者把一個(gè)現(xiàn)有的屬性設(shè)定為指定的值。
語法：
elementNode.setAttribute(name,value)
說明：
1.name: 要設(shè)置的屬性名。
2.value: 要設(shè)置的屬性值。
注意：
1.把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性，該方法將創(chuàng)建一個(gè)新屬性。
2.類似于getAttribute()方法，setAttribute()方法只能通過元素節(jié)點(diǎn)對象調(diào)用的函數(shù)。
7.節(jié)點(diǎn)屬性
在文檔對象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對象。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 ：
1. nodeName : 節(jié)點(diǎn)的名稱
2. nodeValue ：節(jié)點(diǎn)的值
3. nodeType ：節(jié)點(diǎn)的類型
一、nodeName 屬性: 節(jié)點(diǎn)的名稱，是只讀的。
1. 元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
2. 屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱
3. 文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
4. 文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
二、nodeValue 屬性：節(jié)點(diǎn)的值
1. 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
2. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
3. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值
三、nodeType 屬性: 節(jié)點(diǎn)的類型，是只讀的。以下常用的幾種結(jié)點(diǎn)類型:
元素類型 節(jié)點(diǎn)類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9
8.訪問子結(jié)點(diǎn)childNodes
訪問選定元素節(jié)點(diǎn)下的所有子節(jié)點(diǎn)的列表，返回的值可以看作是一個(gè)數(shù)組，他具有l(wèi)ength屬性。
語法：
elementNode.childNodes
注意：
如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則該屬性返回不包含節(jié)點(diǎn)的 NodeList。
我們來看看下面的代碼:
運(yùn)行結(jié)果:
IE:
UL子節(jié)點(diǎn)個(gè)數(shù):3
節(jié)點(diǎn)類型:1
其它瀏覽器:
UL子節(jié)點(diǎn)個(gè)數(shù):7
節(jié)點(diǎn)類型:3
注意:
1. IE全系列、firefox、chrome、opera、safari兼容問題
2. 節(jié)點(diǎn)之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節(jié)點(diǎn)，所以IE是3，其它瀏覽器是7，如下圖所示:
如果把代碼改成這樣:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
運(yùn)行結(jié)果:（IE和其它瀏覽器結(jié)果是一樣的）
UL子節(jié)點(diǎn)個(gè)數(shù):3
節(jié)點(diǎn)類型:1
9.訪問子結(jié)點(diǎn)的第一和最后項(xiàng)
一、firstChild 屬性返回‘childNodes’數(shù)組的第一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則該屬性返回 NULL。
語法：
node.firstChild
說明：與elementNode.childNodes[0]是同樣的效果。
二、 lastChild 屬性返回‘childNodes’數(shù)組的最后一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則該屬性返回 NULL。
語法：
node.lastChild
說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
注意: 上一節(jié)中，我們知道Internet Explorer 會(huì)忽略節(jié)點(diǎn)之間生成的空白文本節(jié)點(diǎn)，而其它瀏覽器不會(huì)。我們可以通過檢測節(jié)點(diǎn)類型，過濾子節(jié)點(diǎn)。
10.訪問父節(jié)點(diǎn)parentNode
獲取指定節(jié)點(diǎn)的父節(jié)點(diǎn)
語法：
elementNode.parentNode
注意:父節(jié)點(diǎn)只能有一個(gè)。
看看下面的例子,獲取 P 節(jié)點(diǎn)的父節(jié)點(diǎn)，代碼如下:
<div id="text">
<p id="con"> parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script>
運(yùn)行結(jié)果:
parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)
DIV
訪問祖節(jié)點(diǎn):
elementNode.parentNode.parentNode
看看下面的代碼:
<div id="text">
<p>
parentNode
<span id="con"> 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)</span>
</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.parentNode.nodeName);
</script>
運(yùn)行結(jié)果:
parentNode獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)
DIV
注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標(biāo)簽之間的空白也算是一個(gè)文本節(jié)點(diǎn)。
11.訪問兄弟節(jié)點(diǎn)
1. nextSibling 屬性可返回某個(gè)節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)（處于同一樹層級(jí)中）。
語法：
nodeObject.nextSibling
說明：如果無此節(jié)點(diǎn)，則該屬性返回 null。
2. previousSibling 屬性可返回某個(gè)節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)（處于同一樹層級(jí)中）。
語法：
nodeObject.previousSibling
說明：如果無此節(jié)點(diǎn)，則該屬性返回 null。
注意: 兩個(gè)屬性獲取的是節(jié)點(diǎn)。Internet Explorer 會(huì)忽略節(jié)點(diǎn)間生成的空白文本節(jié)點(diǎn)（例如，換行符號(hào)），而其它瀏覽器不會(huì)忽略。
解決問題方法:
判斷節(jié)點(diǎn)nodeType是否為1, 如是為元素節(jié)點(diǎn)，跳過。
運(yùn)行結(jié)果:
LI = javascript
nextsibling: LI = jquery
12.插入節(jié)點(diǎn)appendChild()
在指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)列表之后添加一個(gè)新的子節(jié)點(diǎn)。
語法:
appendChild(newnode)
參數(shù):
newnode：指定追加的節(jié)點(diǎn)。
我們來看看，div標(biāo)簽內(nèi)創(chuàng)建一個(gè)新的 P 標(biāo)簽，代碼如下:
運(yùn)行結(jié)果:
HTML
JavaScript
This is a new p
13.插入節(jié)點(diǎn)insertBefore()
insertBefore() 方法可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。
語法:
insertBefore(newnode,node);
參數(shù):
newnode: 要插入的新節(jié)點(diǎn)。
node: 指定此節(jié)點(diǎn)前插入節(jié)點(diǎn)。
我們在來看看下面代碼，在指定節(jié)點(diǎn)前插入節(jié)點(diǎn)。
運(yùn)行結(jié)果:
This is a new p
JavaScript
HTML
注意: otest.insertBefore(newnode,node); 也可以改為: otest.insertBefore(newnode,otest.childNodes[0]);
14.刪除節(jié)點(diǎn)removeChild()
removeChild() 方法從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)。如刪除成功，此方法可返回被刪除的節(jié)點(diǎn)，如失敗，則返回 NULL。
語法:
nodeObject.removeChild(node)
參數(shù):
node ：必需，指定需要?jiǎng)h除的節(jié)點(diǎn)。
我們來看看下面代碼，刪除子點(diǎn)。
運(yùn)行結(jié)果:
HTML
刪除節(jié)點(diǎn)的內(nèi)容: javascript
注意: 把刪除的子節(jié)點(diǎn)賦值給 x，這個(gè)子節(jié)點(diǎn)不在DOM樹中，但是還存在內(nèi)存中，可通過 x 操作。
如果要完全刪除對象，給 x 賦 null 值，代碼如下:
15.替換元素節(jié)點(diǎn)replaceChild()
replaceChild 實(shí)現(xiàn)子節(jié)點(diǎn)(對象)的替換。返回被替換對象的引用。
語法：
node.replaceChild (newnode,oldnew )
參數(shù)：
newnode : 必需，用于替換 oldnew 的對象。
oldnew : 必需，被 newnode 替換的對象。
我們來看看下面的代碼:
效果: 將文檔中的 Java 改為 JavaScript。
注意:
1. 當(dāng) oldnode 被替換時(shí)，所有與之相關(guān)的屬性內(nèi)容都將被移除。
2. newnode 必須先被建立。
16.創(chuàng)建元素節(jié)點(diǎn)createElement
createElement()方法可創(chuàng)建元素節(jié)點(diǎn)。此方法可返回一個(gè) Element 對象。
語法：
document.createElement(tagName)
參數(shù):
tagName：字符串值，這個(gè)字符串用來指明創(chuàng)建元素的類型。
注意：要與appendChild() 或 insertBefore()方法聯(lián)合使用，將元素顯示在頁面中。
我們來創(chuàng)建一個(gè)按鈕，代碼如下：
<script type="text/javascript">
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "創(chuàng)建一個(gè)按鈕";
body.appendChild(input);
</script>
效果：在HTML文檔中，創(chuàng)建一個(gè)按鈕。
我們也可以使用setAttribute來設(shè)置屬性，代碼如下：
<script type="text/javascript">
var body= document.body;
var btn = document.createElement("input");
btn.setAttribute("type", "text");
btn.setAttribute("name", "q");
btn.setAttribute("value", "使用setAttribute");
btn.setAttribute("onclick", "javascript:alert('This is a text!');");
body.appendChild(btn);
</script>
效果：在HTML文檔中，創(chuàng)建一個(gè)文本框，使用setAttribute設(shè)置屬性值。 當(dāng)點(diǎn)擊這個(gè)文本框時(shí)，會(huì)彈出對話框“This is a text!”。
17.創(chuàng)建文本節(jié)點(diǎn)createTextNode
createTextNode() 方法創(chuàng)建新的文本節(jié)點(diǎn)，返回新創(chuàng)建的 Text 節(jié)點(diǎn)。
語法：
document.createTextNode(data)
參數(shù)：
data : 字符串值，可規(guī)定此節(jié)點(diǎn)的文本。
我們來創(chuàng)建一個(gè)<div>元素并向其中添加一條消息，代碼如下：
運(yùn)行結(jié)果:
18.瀏覽器窗口可視區(qū)域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動(dòng)條）的方法:
一、對于IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 瀏覽器窗口的內(nèi)部高度
• window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
二、對于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。
• document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。
或者
Document對象的body屬性對應(yīng)HTML文檔的<body>標(biāo)簽
• document.body.clientHeight
• document.body.clientWidth
在不同瀏覽器都實(shí)用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
19.網(wǎng)頁尺寸scrollHeight
scrollHeight和scrollWidth，獲取網(wǎng)頁內(nèi)容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。
二、針對NS、FF:
scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。也就是說網(wǎng)頁內(nèi)容實(shí)際高度小于 clientHeight 時(shí)，scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
注意:區(qū)分大小寫
scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實(shí)際占用的高度和寬度。
20.網(wǎng)頁尺寸offsetHeight
offsetHeight和offsetWidth，獲取網(wǎng)頁內(nèi)容高度和寬度(包括滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
21.網(wǎng)頁卷去的距離與偏移量
我們先來看看下面的圖：
scrollLeft:設(shè)置或獲取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離 ，即左邊灰色的內(nèi)容。
scrollTop:設(shè)置或獲取位于對象最頂端與窗口中可見內(nèi)容的最頂端之間的距離 ，即上邊灰色的內(nèi)容。
offsetLeft:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置 。
offsetTop:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算頂端位置 。
注意:
1. 區(qū)分大小寫
2. offsetParent：布局中設(shè)置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節(jié)點(diǎn)開始，一層層向上找，直到HTML的body。
五、JS學(xué)習(xí)之DOM及案例
轉(zhuǎn)自或參考：JS學(xué)習(xí)之DOM及案例
https://blog.csdn.net/huangql517/article/details/80476171
1、DOM簡介
當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對象模型（Document Object Model，簡稱DOM）。
即當(dāng)瀏覽器載入HTML文檔時(shí), 它就會(huì)成為DOM對象，而在JS中，所有的事物都是節(jié)點(diǎn)，
元素、文本等都是節(jié)點(diǎn)?？梢酝ㄟ^節(jié)點(diǎn)進(jìn)行DOM對象的增刪改查。
既然HTML在被瀏覽器加載時(shí)會(huì)對應(yīng)的生成DOM對象，而JS又可以通過節(jié)點(diǎn)來操作DOM，所以，JS
完全可以創(chuàng)建動(dòng)態(tài)的HTML，
看一下實(shí)際當(dāng)中的一些場景，js是怎么處理的，案例如下。
2、先來點(diǎn)語法
2.1、獲取DOM節(jié)點(diǎn)的方法
//通過id獲取，唯一的
var oDiv = document.getElementById('box');
//通過類名獲取，返回?cái)?shù)組形式，所以可以加索引取值
var oDiv = document.getElementsByClassName('.box')[0];
//通過標(biāo)簽名獲取
var oDiv = document.getElementsByTagName('div')[0];
2.2、常用的DOM節(jié)點(diǎn)
2.3、節(jié)點(diǎn)的增刪改查
// 刪除元素上的class屬性
oH2.removeAttribute('class');
// 刪除創(chuàng)建的DOM對象
oDiv.removeChild(oH2);
// 父節(jié)點(diǎn).replaceChild(新節(jié)點(diǎn),子節(jié)點(diǎn)) 用新節(jié)點(diǎn)替換某個(gè)子節(jié)點(diǎn)
var op = document.createElement('p');
op.innerText = '我是一個(gè)段落';
oDiv.replaceChild(op,oH2);
3、模態(tài)框案例
// 獲取dom元素
var btn = document.getElementById('btn');
// 1、創(chuàng)建divdom元素
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');
// 2、設(shè)置各dom元素的屬性，方便后續(xù)定位操作，寫樣式等
oDiv.id = 'box';
oP.id = 'content';
oSpan.id = 'span1';
oP.innerHTML = '模態(tài)框成功彈出';
oSpan.innerHTML = '關(guān)閉';
// 3、部署dom元素，理清層級(jí)關(guān)系
oDiv.appendChild(oP);
oP.appendChild(oSpan);
//給按鈕添加點(diǎn)擊事件
btn.onclick = function(){
//動(dòng)態(tài)的添加到一個(gè)div到body中，并且在btn前面
console.log(this);//當(dāng)前this指向的是當(dāng)前按鈕元素
this.parentNode.insertBefore(oDiv,btn);
};
//點(diǎn)擊span標(biāo)簽就觸發(fā)刪除節(jié)點(diǎn)函數(shù)，刪除整個(gè)div塊
oSpan.onclick = function(){
// removeChild()刪除節(jié)點(diǎn)
oDiv.parentNode.removeChild(oDiv)
}
樣式自己設(shè)置下，最終效果如下，頁面首先展示一個(gè)button按鈕，點(diǎn)擊彈出模態(tài)框（div塊>p標(biāo)簽>span標(biāo)簽），
再點(diǎn)擊span（關(guān)閉），則刪除div塊，回到頁面初始的樣子，
4、點(diǎn)擊有驚喜案例
<style>
#box{
width: 200px;
height: 200px;
background-color: green;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
點(diǎn)擊有驚喜
</div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
console.log(box);
var n=0;
box.onclick = function(){
n++;
if(n%4==1){
this.style.backgroundColor='blue';
this.innerText = '2222'
}else if(n%4==2){
this.style.backgroundColor='red';
this.innerText = '3333'
}else if(n%4==3){
this.style.backgroundColor='yellow';
this.innerText = '4444'
}else{
this.style.background = 'transparent';
this.innerText = '';
}
}
</script>
初始頁面有個(gè)div盒子，樣式已設(shè)置，js里面現(xiàn)在通過id找到dom元素，再通過一個(gè)自增n對4取余的結(jié)果來改變dom元素
屬性，比如上面的背景色和蚊子內(nèi)容，達(dá)到點(diǎn)擊一直切換的效果。
效果如下
六、jquery的dom操作實(shí)例
轉(zhuǎn)自或參考：DOM操作之屬性和樣式操作
https://www.cnblogs.com/yuyujuan/p/9410428.html
在DOM操作，除了前面的節(jié)點(diǎn)操作以外，常常被用到的操作還有屬性操作和節(jié)點(diǎn)操作，下面，主要來總結(jié)一下jQuery中的屬性操作方法和樣式操作方法。
在開始操作前，我們需要先在html中添加如下代碼，后面所有的操作都是基于該DOM結(jié)構(gòu)進(jìn)行的。
復(fù)制代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<style>
.red{
color:red;
}
.blue{
color:blue;
}
.yellow{
color:yellow;
}
</style>
</head>
<body>
<p title="選擇你最喜歡的水果">你最喜歡的水果是？</p>
<ul>
<li title='蘋果' class="red">蘋果</li>
<li title='香蕉'>香蕉</li>
<li title='荔枝'>荔枝</li>
</ul>
<script>
</script>
</body>
</html>
復(fù)制代碼
屬性操作
獲取和設(shè)置屬性
在前面我們提到過一個(gè)方法attr()，通過給該方法添加一個(gè)參數(shù)（屬性名稱），可以獲取相應(yīng)信息。
$(function(){
var txt = $("ul li:eq(1)").attr("title");
console.log(txt);
})
當(dāng)給該方法傳遞多個(gè)參數(shù)時(shí)，可以用來設(shè)置相關(guān)屬性。
$(function(){
$("ul li:eq(1)").attr("title","最喜歡的水果");
$("ul li:eq(2)").attr({"title":"水果","name":"荔枝"});
})
刪除屬性
在jQuery中，使用removeAttr()方法刪除某個(gè)元素的特點(diǎn)屬性。
$(function(){
$("p").removeAttr("title");
})
樣式操作
獲取和設(shè)置樣式
因?yàn)閏lass也是和title一樣，也屬于元素的屬性，所以，我們可以使用attr()來獲取和設(shè)置元素的class。
復(fù)制代碼
$(function(){
var txt1 = $("ul li:eq(0)").attr("class");
console.log(txt1);
$("ul li:eq(0)").attr("class","blue");
var txt2 = $("ul li:eq(0)").attr("class");
console.log(txt2);
})
復(fù)制代碼
使用attr()方法設(shè)置樣式時(shí)，新的樣式覆蓋了之前的樣式。
添加樣式
有的時(shí)候，我們希望為某個(gè)元素添加樣式，但是又不覆蓋之前原有的樣式，很明顯，attr()并不能滿足我們的要求，這個(gè)時(shí)候，我們需要用到一個(gè)新的方法addClass()，該方法是在不改變原有樣式的基礎(chǔ)上，在后面添加新的樣式。
復(fù)制代碼
$(function(){
var txt1 = $("ul li:eq(0)").attr("class");
console.log(txt1);
$("ul li:eq(0)").addClass("blue");
var txt2 = $("ul li:eq(0)").attr("class");
console.log(txt2);
})
復(fù)制代碼
移除樣式
在上面，我們知道可以用removeAttr()方法刪除元素的屬性，自然，這個(gè)方法可以用來刪除元素的樣式。
$(function(){
$("ul li:eq(0)").removeAttr("class");
})
除了刪除屬性的方法外，jQuery中，還有一個(gè)專門用來刪除元素樣式的方法：removeClass()，參數(shù)為需要?jiǎng)h除的類名，該方法可以同時(shí)刪除一個(gè)或多個(gè)樣式，多個(gè)類名中間用空格間隔即可，當(dāng)該方法不帶參數(shù)時(shí)，表明要?jiǎng)h除該元素的所有方法。
$(function(){
$("ul li:eq(0)").removeClass("red");
})
判斷是否含有某個(gè)樣式
hasClass()方法可以用來判斷元素中是否含有某個(gè)class，如果有，返回true，否則，返回false。
$(function(){
var txt1 = $("ul li:eq(0)").hasClass("red");
var txt2 = $("ul li:eq(1)").hasClass("red");
console.log(txt1);
console.log(txt2);
})
版權(quán)聲明: 本站僅提供信息存儲(chǔ)空間服務(wù)，旨在傳遞更多信息，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任，不代表本網(wǎng)贊同其觀點(diǎn)和對其真實(shí)性負(fù)責(zé)。如因作品內(nèi)容、版權(quán)和其它問題需要同本網(wǎng)聯(lián)系的，請發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。
