本文目錄一覽：
js DOM操作
1）一共12個節點類型
2）dom操作就是對節點進行操作
3）節點的類型的獲取方法notetype
4）ie9以上及chrome safari firefox 會將換行符當成節點
（1）靜態獲取
（2）返回帶有指定ID的元素
var box1=document.getElementById(‘box’);
（1）根據標籤名獲取
（2）得到的是個數組
var div1=document.getElementsByTagName(‘div’)[0];
（1）根據類名獲取元素
（2）動態獲取
（3）得到的是一個數組
var box=document.getElementsByClassName(‘box’)[0];
（1）返回符合要求第一個元素
（2）通過css選擇器來獲取指定標籤
（3）靜態獲取
（1）返回所有匹配元素
（2）根據css選擇器來獲取所有標籤
（3）得到的是一個數組
獲取兄弟節點
獲取下一個兄弟標籤
獲取上一個兄弟節點
獲取上一個兄弟標籤
獲取最後一個子節點
獲取最後一個子標籤
獲取所有非標籤類型的子節點
獲取所有子標籤節點
獲取父節點
增加節點
var div=document.createElement(‘div’);
在父元素的末尾，插入節點
在添加元素前，需要將元素先創建好
div.appendChild(div);
修改指定子節點
刪除指定子節點
在刪除前需要先獲取到被刪除元素
div.removeChild(box);
刪除當前節點
需要先獲取到被刪除的節點
div.remove();
（1）設置ID
div.id=’box’;
（2）設置class
div.className=’box’;
（3）設置style
div.style.width=’10px’;
（4）設置圖片路徑
img.src=’../’;
（5）.自定義屬性
js操作節點的DOM方法
js操作節點的DOM方法
一、創建節點
createElement
createTextNode
二、添加、刪除、替換、克隆元素
1、appendChild
2、insertBefore
3、如果appendChild、insertBefore追加的是已經存在的子元素，實際上就會將子元素位置移動
4、刪除節點remove removeChild
remove()
removeChild
5.替換節點
replaceChild
6、克隆節點
cloneNode()
三、操作元素屬性的方法
1.獲取屬性 元素.屬性名
2.設置屬性 元素.屬性名 = 屬性值
1、2方法只能獲取和設置元素自帶的屬性
3.操作屬性的萬能方法
getAttribute()
setAttribute()
JS之DOM操作
DOM： Document Object Model，文檔對象模型；js提供了豐富的api來操作文檔內容。
DOM樹： html文檔中的內容是以樹形結構排布，html是DOM樹根，html下只有兩個子標籤head、body
節點： DOM將所有的分支端都成為節點。節點有很多類型，常見的節點類型有：文本節點、元素節點。
可以通過 nodeType查看節點類型 ： 1元素節點、3文本節點
特殊的元素節點：
1、html元素
2、body元素
3、head元素
節點操作的api（屬性和方法）
1、nodeName：只讀屬性，可以讀取節點名稱
2、nodeType：只讀屬性，讀取節點類型
3、 hasChildNodes()：判斷調用方法的節點是否存在子節點，存在返回true，不存在返回false。
主流瀏覽器會將換行符、製表符、空格當做文本節點處理，IE9以下會忽略它們。
4、childNodes：只讀屬性，獲得節點的子節點集合，子節點集合是一個類數組結構，有數組特點無數組方法
5、firstChild：獲得節點的第一個子節點
6、lastChild：獲得節點的最後一個子節點
7、querySelector()：
參數：string類型，css選擇器
作用：獲得文檔中第一個符合選擇器條件的節點
兼容：在IE9以下不支持
8、 querySelectorAll()： // 獲得的都是靜態集合
參數：string類型，css選擇器
作用：獲得文檔中所有符合選擇器條件的節點集合（類數組結構）
兼容：在IE9以下不支持
注意： querySelector() 和 querySelectorAll() 得到的都是元素節點。
9、previousSibling：獲取節點的前一個兄弟節點
10、nextSibling：獲取節點的後一個兄弟節點
11、parentNode：獲得節點的父節點（父節點一定是元素節點）
12、removeChild()：節點刪除它的指定子節點
DOM操作元素：暫時不用的隱藏、一定不用的刪除。
13、cloneNode()：克隆一個節點
參數：boolean類型，true深克隆，false淺克隆，默認淺克隆
深克隆：不僅克隆節點和節點的屬性，還會克隆節點的子節點
淺克隆：只克隆節點和節點的屬性，不會克隆節點的子節點
14、a.replaceChild(b,c)：用b替換c
其中a是c的父節點，c是文檔上已經存在的節點，b可以是節點也可以是已存在節點，被替換的節點會從文檔結構中刪除。
15、a.replaceWith(b)：用b替換a
a已存在的節點，b可以是新節點也可以是已存在節點，被替換的節點從DOM樹刪除。
16、a.insertBefore(b,c)：在c前面插入b
其中，a是c的父節點，c是已經存在的節點，b是新節點
17、a.appendChild(b)：在a末尾追加b
a是父節點，b是a的子節點, c是子節點
元素節點的相關api
1、getElementsByTagName()：根據標籤名獲得元素集合（類數組結構）
區別：HTMLCollection 是動態集合，NodeList 是靜態集合。
2、createElement()：根據標籤名創建新元素
3、id：讀寫屬性，可以讀取或設置元素的id值
4、className：讀寫屬性，可以讀取或設置元素的class值
5、classList：讀取標籤的類名集合（類數組結構）
add()：為元素新增類名，如果類名已存在不會重複添加
remove()：刪除元素指定類名，如果類名不存在不會執行操作
元素的屬性分為兩類：
一類是元素本里就擁有的屬性，例如：id、class、style、src、herf、target、alt、title、type、value等等，這些屬性可以在js中直接通過.語法讀取或設置。
再一類是我們為了解決問題給元素添加的自定義屬性，這些屬性在js中無法直接通過.語法讀取，需要通過操作方法訪問。
6、setAttribute(name,value)
參數：name表示要設置的屬性名，value要為屬性設置的值
無返回值
7、getAttribute(name)
參數：name表示要讀取的屬性名
返回值：返回屬性的值，如果屬性不存在會返回null
8、removeAttribute(name)
參數：name表示要刪除的屬性名
無返回值
說明：setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地屬性和自定義屬性。
element拓展：
兼容：以下屬性、方法在IE9以下不支持。
1、children：讀取元素的所有元素子節點集合（類數組）
2、parentElement：讀取元素的父元素節點
3、previousElementSibling：讀取前一個元素兄弟節點
4、nextElementSibling：讀取後一個元素兄弟節點
5、firstElementChild：讀取第一個元素子節點
6、lastElementChild：讀取最後一個元素子節點
7、remove(): 將調用方法的元素從DOM結構中刪除
用js給dom對象設置樣式，然後改變樣式
script type=”text/javascript”
var obj = document.getElementById(id);
function style(obj){
obj.style = “font-size:30px;background:teal;height:900px”;
obj.style = “font-size:100px;opacity:.67;width:100px”;
}
style(obj);
/script
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/307080.html
微信掃一掃 
支付寶掃一掃 