javaScript. Dom 基本操作

DOM

节点查找

1document.getElementById() //通过id查找
2document.getElementsByTagName() //通过标签名
3document.getElementsByName() //通过name名查找 
4document.getElementsByClassName("类名")//通过类名获取元素对象 
5document.querySelector("选择器") //通过选择器名称获取元素对象
6document.querySelectorAll("选择器")  //通过选择器名称获取所有元素对象

节点创建

1var elem = document.createElement("p");
2var text = document.createTextNode("我是个文本节点")
3var attr = document.createAttribute('data-item')
4attr.value = '我爱我的祖国'
5elem.setAttributeNode(attr);
6elem.append(text);
7
8var fra = document.createDocumentFragment();//文档片段
9fra.append(elem);
10document.body.append(fra);
11

节点关系

1/* 父节点*/
2parentNode 父节点
3parentElement 父元素节点
4offsetParent 定位元素父节点 或者body
5/* 子节点*/
6childsNodes  所有的子节点
7fisrtChild  第一个自己点
8lastChild 最后一个子节点
9firstElementChild  第一个元素节点
10lasttElementChild 最后一个元素节点
11/* 兄弟节点*/
12nextSibling  查找下一个兄弟节点
13nextElementSibling 查找到下一个元素节点
14previousSibling 查找上一个兄弟节点
15previousElementSibling 查找到上一个元素节点

节点分类

1. 元素节点
2. 属性节点
3. 文本节点

节点操作

1reomove() //删除自己
2removeChilid()//删除子元素
3append()//插入子节点 可以插入多个字节的
4appendChild()//插入子节点
5insertBefore //插入到节点前边
6cloneNode() //节点复制
7cloneNode(true) //节点的复制
8replace //替换节点