1.例子：在末尾添加一个节点。
第一步：获取到ul标签；
第二步：创建li标签：document.creatElement("标签名称");方法
第三步：创建文本：document.creatTextNode("文本内容");
第四步：把文本添加到li下面：使用appendChild方法
第五步：把li添加到ul的下面：使用appendChild方法
PS：因为HTML 按节点树的解析方式 在解析。
2.元素对象（elements对象）
--要操作 elements对象，要先获取elements，使用-documents 里面相应的方法获取
--方法：
获取属性里面的值getAttribute("属性名称");
-var input1 = document.getElementById("id");
-alert(input1.value);
-alert(input1.getAttribute("value"));
设置属性里面的值
-input1.setAttribute("class","haha");
删除属性
-input1.removeAttribute("name");
不能删除value
--想要获取标签下的子标签：使用属性childNodes,但是这个兼容性很差，所以可以使用getElementsByTagName方法，这也是唯一有效的方法
3.Node对象属性1，HTML DOM Element 对象可以查阅
nodeName
nodetype
nodevalue //分标签节点和属性节点
Node对象属性2,
父节点：parentNode 配合 document.getElementById("id");
子节点：childNodes：得到所有子节点，但是兼容性很差。firstChild 和 lastChild
同辈节点：element.nextSibling返回位于相同节点树层级的下一个节点。element.previousSibling返回位于相同节点树层级的前一个元素
4.操作dom树
appendChild方法，添加子节点到末尾，特点：类似于剪切粘贴的效果
insertBefore(newNode,oldNode)方法：在某个节点之前插入一个新的节点。
<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">请点击按钮向列表插入一个项目。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)
var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>
<p><b>注释：</b><br>首先请创建一个 LI 节点，<br>然后创建一个文本节点，<br>然后向这个 LI 节点追加文本节点。<br>最后在列表中的首个子节点之前插入此 LI 节点。</p>
</body>
</html>
6.removeChild方法：删除节点。
通过父节点删除自己，不能自己删除自己，可以通过Id属性获得父节点，也可以通过parendNode();获取
7.replaceChild(newNode,oldNode)方法
8.cloneNode(boolean):复制节点，boolean代表是否复制节点。
9.操作dom总结：
移动节点：查找节点，获取节点方法：getElementById():,getElementByName();getElementByTagName();
插入节点：appendChild()方法，insertBefore方法
替换节点：replaceChild()方法
删除节点：removeChild()方法
扫一扫
3645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
