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);//附加结点