DOM
节点查找
document.getElementById() //通过id查找
document.getElementsByTagName() //通过标签名
document.getElementsByName() //通过name名查找
document.getElementsByClassName("类名")//通过类名获取元素对象
document.querySelector("选择器") //通过选择器名称获取元素对象
document.querySelectorAll("选择器") //通过选择器名称获取所有元素对象节点创建
var elem = document.createElement("p");
var text = document.createTextNode("我是个文本节点")
var attr = document.createAttribute('data-item')
attr.value = '我爱我的祖国'
elem.setAttributeNode(attr);
elem.append(text);
var fra = document.createDocumentFragment();//文档片段
fra.append(elem);
document.body.append(fra);
节点关系
/* 父节点*/
parentNode 父节点
parentElement 父元素节点
offsetParent 定位元素父节点 或者body
/* 子节点*/
childsNodes 所有的子节点
fisrtChild 第一个自己点
lastChild 最后一个子节点
firstElementChild 第一个元素节点
lasttElementChild 最后一个元素节点
/* 兄弟节点*/
nextSibling 查找下一个兄弟节点
nextElementSibling 查找到下一个元素节点
previousSibling 查找上一个兄弟节点
previousElementSibling 查找到上一个元素节点节点分类
- 元素节点
- 属性节点
- 文本节点
节点操作
reomove() //删除自己
removeChilid()//删除子元素
append()//插入子节点 可以插入多个字节的
appendChild()//插入子节点
insertBefore //插入到节点前边
cloneNode() //节点复制
cloneNode(true) //节点的复制
replace //替换节点
