js的dom節點調用，生成及操作

一.瞭解結點

html可以被看做一顆dom樹。樹上有許多結點。

結點共有三種類型：元素結點，文本結點，屬性結點。

1.元素結點

元素結點是最重要的結點，是html的主要構成。例如簡單的<div></div>就是一個元素結點。元素結點上可以延伸出其他結點（元素結點，文本結點，屬性結點）

2.文本結點

文本結點爲具體內容，例如<div>hello</div>裏，就是一個div元素結點下有一個hello的文本結點

3.屬性結點

屬性結點爲附加屬性，例如<div id="a" data="aaa"></div>裏，就是一個div元素結點下，有id屬性結點與data屬性結點

 

二.通過js控制結點

1.獲取結點

document.getElementById("aId");//根據id屬性獲取元素（一個）
document.getElementsByClass("aClass");//根據class屬性獲取元素組（多個）
document.getElementsByName("aName");//根據name屬性獲取元素組（多個）
document.getElementsByTagName("aTagName");//根據標籤名獲取元素組（多個）

2.創建結點

let outDivDom = document.createElement("div");//創建元素結點，括號內的參數控制其標籤
let textDom = document.createTextNode("hello");//創建文本結點，參數控制文本內容

3.設定某結點屬性

let labelDom = document.createElement("label");//創建標籤
labelDom.setAttribute("id", "labelDom");//設定屬性

4.添加結點爲某結點的子節點

let labelDom = document.createElement("label");
let textDom = document.createTextNode("標籤");
labelDom.appendChild(textDom);//附加結點