dom节点操作

• dom节点操作

虽然现在的框架都是操作的虚拟dom，并不需要去操作真实dom，但是dom文档对象模型是js的重要组成部分之一，所以问dom也无可厚非,我会将其详细记录在此，我平时写一些小的demo也只要涉及到js还是会用dom节点的一些操作！

 

获取节点:
document:
getElementById:通过元素ID获取节点
getElementsByName:通过元素的name属性获取节点
getElementsByTagName:通过元素标签获取节点
getElementsByClassName:通过元素class获取节点
节点指针:
firstChild:获取元素的首个子节点
lastChild:获取元素的最后一个子节点
childNodes:获取元素的节点列表
previousSibling:获取已知点的前一个节点
nextSibling:获取已知接点的后一个节点
parentNode:获取已知节点的父节点
节点操作:
创建节点：
createElement:创建元素节点
createAttribute:创建属性节点
createTextNode:创建文本节点
插入节点:
appendChild:向节点的子节点列表的末尾添加新的子节点
inserBefore:在已知的子节点前插入一个新的子节点
replaceChild:将某个子节点替换为另一个
复制节点:
cloneNode:创建指定节点的副本
删除节点:
removeChild:删除指定的节点
复制代码

如何用js创建一个id为content的div dom节点，并给该标签添加一个data-id的自定义属性?

//实际是用js操作dom写一个<div id="content" data-id="1">给该标签添加一个data-*的自定义属性</div>的html代码
window.onload=function(){
var btn = document.createElement('div');//创建HTML标签
var btntxt = document.createTextNode('给该标签添加一个data-*的自定义属性');//创建文本节点
btn.appendChild(btntxt);//文本节点追加到HTML标签中
btn.id = "content";//给HTML标签添加id
btn.setAttribute("data-id","1");//添加data-id的自定属性
document.body.appendChild(btn);//将HTML标签追加到文档中
}