一.dom操作
dom的组成
元素节点
属性节点
文本节点
通过nodeType查看类型
1 元素节点 ,2 属性节点 ,3 文本节点
节点名称
nodeName
console.log(oBox.nodeName); //返回值是大写标签名称
console.log(oBox.childNodes[0].nodeValue); //了解
console.log(oBox.innerText);
二.元素节点
获取所有节点
childNodes=文本节点+元素节点
children 微软 推荐使用
// 注意:在ie6 7 8 下会把注释当做元素
parentNode 父节点
//parentNode找到了html标签后的父节点是document
//parentElement 找亲父亲
//parentElement找到了html标签后的父节点是null
var oInner = document.getElementById("inner");
// oInner.parentNode.style.color = "red";
// oInner.parentElement.style.border = "1px solid red";
兄弟节点
- 获取后一个兄弟
// xxx.nextElementSibling||xxx.nextSibling
- 获取前一个兄弟
(XXX.previousElementSibling || XXX.previousSibling)
子节点
//获取第一个元素
(oBox.firstElementChild || oBox.firstChild)
//获取最后一个孩子
(oBox.lastElementChild || oBox.lastChild)
三.获取属性
//获取所有属性 attributes
//设置属性 setAttribute("属性名","属性值")
//获取属性 getAttribute("属性") 返回属性的值
// 删除属性 removeAttribute(属性名称)
//动态属性 (checked,selected,disabled)
//不可以使用 setAttribute,getAttribute, removeAttribute
createElement()//创建一个元素节点
createTextNode()//创建文本节点
appendChild()//将一个新的节点添加到某个节点的子节点末尾
insertBefore()//把节点插入到指定的节点前面
replaceChild()//把节点替换成指定的节点
removeChild()//删除指定子节点
cloneNode()//克隆 true深克隆
网友评论