javascript DOM基本操作

javascript DOM基本操作

1.DOM(Document Object Model 文档对象模型)

2.节点：

• 文档节点：document
• 元素节点：html、head、body、title、meta、h1、p等
• 属性节点：attr
• 文本节点：text

2.1节点获取

• documen.getElementById("元素ID")                       //返回含有该ID的元素
• document.getElementsByName("元素name属性")     //返回带有指定名称元素的集合
• document.getElementsByTagName("元素标签")       //返回指定元素的集合

2.2属性节点处理

• elementNode.hasAttribute("attrName")                 // 检测所选元素是否有attrName属性  eg:documen.getElementById("nav").hasAttribute("class")
• elementNode.getAttribute("attrName")                 //获取元素attrName属性的值
• elementNode.setAttribute("attrName","attrValue") //设置属性，创建或改变元素属性值
• elementNode.removeAttribute("attrName")           //移除属性
• 注意：在获取属性和移除属性时，用hasAttribute()方法判断此属性是否存在

2.3文本节点处理

• 通过innerHTML属性获取和设置文本节点属性
• documen.getElementById("content").innerHTML="<p>hello!</p>"

3遍历DOM

• 父节点.firstChild       //获取元素的首个子节点
• 父节点.lastChild       //获取元素最后一个子节点
• 父节点.childNode     //获取元素子节点列表
• 子节点.parentNode  // 获取已知节点父节点
• 兄弟节点.previousSibling    //获取已知节点前一个节点
• 兄弟节点.nextSibling          //获取已知节点后一个节点

4.节点操作