目录
3.操作HTML元素 写入文档 新建节点 新建文本节点 追加节点 插入节点 替换节点 删除节点 删除自身节点 克隆节点
一.获取Dom节点
1.根据ID获取元素
var today = document.getElementById("")
2.根据class类名获取 伪数组
var box = document.getElementsByClassName("")
3.根据标签名获取元素
var item = document.getElementByTagName("")
4.获取特殊节点
var doc = document.documentElement
5.获取body
var body = document.body
6.获取title
var title = document.title
二.innerHTML和innerText 的区别
innerHTML 可以识别标签
innerText 不可以识别标签
三.修改属性
1.通过.形式修改属性
box.title = "修改后的文本";
修改类名 className
box.className = "pox box";
box.id = "hot"
2.setAttribute() 设置属性
pic.serAttribute("title","头像")
3.getAttribute() 获取属性
console.log(pic.getAttribute("src"))
4.removeAttribute() 删除属性
pic.removeAttribute("alt")
四.操作HTML元素
1.写入到文档
document.write("abc");
2.新建节点
var box = document.createElement("div");
3.新建文本节点
var text = document.createTextNode("hello world");
4.追加节点
box.appendChild(text);
5.插入节点 往谁里面插入,插入什么东西,插入到谁之前
insertBefore insertAfter ×
father.insertBefore(box, son2);
6.替换节点 谁里面需要替换,用谁替换,替换掉谁
father.replaceChild(box, son2);
7.删除节点
removeChild 删除子节点
father.removeChild(son2);
8.删除自身节点
father.remove()
9.克隆节点
var clone = father.cloneNode(true);
五.根据节点之间关系获取元素
1.获取父节点
console.log(son1.parentNode);
2.获取兄弟节点
console.log(son1.nextSibling);
3.幽灵节点
nextSibling
nextElementSibling
4.获取子节点
console.log(father.firstChild);
console.log(father.firstElementChild);
console.log(father.lastChild);
console.log(father.lastElementChild);
5.获取所有子节点
console.log(father.childNodes);
console.log(father.children);