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