1.案例一：在末尾添加节点
第一步：获取到 ul 标签
第二步：创建 li 标签
document.createElement（“标签名称”）;方法第三步：创建文本
document.createTextNode（“文本内容”）；第四步：把文本添加到 li 下面
使用 appendChild 方法第五步：给 li 添加 ul 末尾
使用 appendChild 方法
代码实现：
<body>
<ul id="ulid">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<br />
<input type="button" value="add" onclick="add1()"/>
<script type="text/javascript">
//在末尾添加
function add1(){
//获取到ul标签
var ul1 = document.getElementById("ulid");
//创建标签
var li1 = document.createElement("li");
//创建文本
var text1 = document.createTextNode("555");
li1.appendChild(text1);
ul1.appendChild(li1);
}
</script>
</body>
2.元素对象（element 对象）
要操作 element 对象，首先必须要获取到 element
——使用 document 里面相应的方法获取
方法：
获取属性里面的值
getAttribute（“属性名称”）;
代码实现：
<input type="text" name="name1" id="inputid" value="aaa"/>
//先要获取input标签
var input1=document.getElementById（“inputid”）；
alert（input1.value）; //弹出 aaa
alert（input1.getAttribute（“value”））； //弹出 aaa
设置属性的值
input1.setAttribute（“class”，“haha”）；
删除属性值
input1.removeAttribute（“name”）；
不能删除 value 值
3.想要获取标签下面的子标签
使用属性 childNodes,但是这个属性兼容性很差
获得标签下面子标签的唯一有效方法，使用 getElementByTagName ()`方法'
<body>
<ul id="ulid1">
<li>aaaa</li>
<li>bbb</li>
<li>cccc</li>
</ul>
<script type="text/javascript">
//获取到ul下面的所有子标签（子元素）
//获取ul标签
var ul11 = document.getElementById("ulid1");
//获取ul下面的子标签
//var lis = ul11.childNodes;//不兼容
var lis =ul11.getElementsByTagName("li");//兼容
alert(lis.length);
</script>
</body>
3.Node 对象属性一
NodeName
nodeType``nodeValue`
使用 dom 解析 html 时，需要 html 里面的标签，属性和文本都封装成对象
标签节点对应的值
<body>
<span id ="spanid">哈哈</span>
<script type="text/javascript">
//获取标签对象
var span1 = document.getElementById("spanid");
alert(span1.nodeType);//1
alert(span1.nodeName);//SPAN
alert(span1.nodeValue);//空
//属性
var id1 = span1.getAttributeNode("id");
alert(id1.nodeType);//2
alert(id1.nodeName);//id
alert(id1.nodeValue);//spanid
//文本
var text1 = span1.firstChild;
alert(text1.nodeType);//3
alert(text1.nodeName);//#TEXT
alert(text1.nodeValue);//哈哈
</script>
</body>
nodeType：1
NodeName：大写标签名称 比如 SPAN
nodeValue：null
属性节点对应的值
nodeType：2
NodeName：属性名称
nodeValue：属性的值
文本节点对应的值
nodeType：3
NodeName：#text
nodeValue：文本内容
5.Node 对象的属性二
<ul id="ulid">
<li id="li1">qqq</li>
<li id="li2">www</li>
<li id="li3">www</li>
<li id="li4">www</li>
</ul>
父节点
ul 是 li 的父节点
parentNode
var li1=document.getElementById("li1");
var ul1=li1.parentNode;
alert（ul1.id）;//ulid
子节点
li 是 ul 的子节点
childNodes：得到所有子节点，但是兼容性很差
firstchild：获取第一个子节点
var ul1=document.getElementById（“ulid”）；
var li1=ul1.firstchild;
alert（li1.id）;//li1
lastchild：获取最后一个子节点
var ul1=document.getElementById（“ulid”）；
var li4=ul1.lastchild;
alert（li4.id）;//li4
同辈节点
li 直接关系是同辈节点
nextSibing：返回一个给定节点的下一个兄弟节点
previousSibling：返回一个给定节点的上一个兄弟节点
