javaScript. Dom 基本操作

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 查找到上一个元素节点

节点分类

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

节点操作

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