文档对象模型DOM
2015-08-13 23:22
211 查看
一、文档节点(最顶层的节点或者说根节点)
二、节点属性和方法
1.firstChild : 指向在c
hildNodes列表中的第一个节点
2.lastChild : 指向在childNodes列表中的最后一个节点
3.childNodes : 所有子节点列表
4. previousSibling : 指向前一个兄弟节点,如果这个节点就是第一个兄弟节点,那么该值为null
5. nextSibling : 指向后一个兄弟节点,如果这个节点就是最后一个兄弟节点,那么该值为null
6.appendChild(node) : 将node添加到childNodes的末尾
7.removeChild(node)
: 从childNodes中删除node
8.replaceChild(newnode,
oldnode) : 将childNode中的oldnode替换成newnode
9.insertBefore(newnode,
refnode):将childNode中的refnode之前插入newnode
三、访问指定节点
1.getElementsByTagName()方法:根据元素名称获取所有元素的数组
2.getElementByName()方法:用来获取所有name属性等于指定的元素
3.getElementById()方法:返回id特性等于指定值的元素
部分代码如下:
二、节点属性和方法
1.firstChild : 指向在c
hildNodes列表中的第一个节点
2.lastChild : 指向在childNodes列表中的最后一个节点
3.childNodes : 所有子节点列表
4. previousSibling : 指向前一个兄弟节点,如果这个节点就是第一个兄弟节点,那么该值为null
5. nextSibling : 指向后一个兄弟节点,如果这个节点就是最后一个兄弟节点,那么该值为null
6.appendChild(node) : 将node添加到childNodes的末尾
7.removeChild(node)
: 从childNodes中删除node
8.replaceChild(newnode,
oldnode) : 将childNode中的oldnode替换成newnode
9.insertBefore(newnode,
refnode):将childNode中的refnode之前插入newnode
三、访问指定节点
1.getElementsByTagName()方法:根据元素名称获取所有元素的数组
2.getElementByName()方法:用来获取所有name属性等于指定的元素
3.getElementById()方法:返回id特性等于指定值的元素
部分代码如下:
<!DOCTYPE html> <html> <head> <title>节点</title> <meta charset="utf-8"/> </head> <body> <div id="first"> <div id = "chaochao" name = "wangchao" style="color: red">节点</div> <div>wenqiang</div> </div> <p name = "20"> 20</p> <span id = "wj">送</span> <p id="haha">哈哈</p> </body> <script type="text/javascript"> /* var chaochaoDiv = document.getElementById("chaochao"); chaochaoDiv.setAttribute("class", "bold");//新增属性 chaochaoDiv.setAttribute("id", "wengqiang");//覆盖旧的属性 var divObj = document.getElementsByTagName("div");//取得body元素 alert(pObj.nodeValue); */ /*var pObjs = document.getElementsByName("20"); alert(pObjs[0].innerHTML); var spanObjs = document.getElementById("wj"); alert(spanObjs.innerHTML);//textContext*/ /* var firstDiv = document.getElementById("first");//id为first的 var firstchildDiv = firstDiv.firstElementChild;//id为first的第一个节点 alert(firstchildDiv.textContent);//取出“节点”*/ var pObj = document.createElement("p"); var textObj = document.createTextNode("呵呵"); pObj.appendChild(textObj); var hahaP = document.getElementById("haha"); hahaP.appendChild(pObj); </script> </html>
相关文章推荐
- CSS (一)
- Remove Duplicates from Sorted List II
- struts checkbox选中
- 如何查看WAS生成的Snap.***.trc文件
- windows10 快捷键大全
- Shell操作MySQL
- 插入排序InsertSort
- 设计模式-创建型之建造者模式
- 持续集成实践
- mysql文档摘要续2
- 如何查看WAS生成的Snap.***.trc文件
- Leetcode 之 Subsets
- JavaScript 编程
- 机器学习中文参考手册
- iOS性能优化:Instruments使用实战
- 子类继承父类的变量和父类原有变量的关系
- IOS开发常用设计模式
- hdu 1013 Digital Roots(数论 模拟)
- 外观模式 Facade
- 小tip:中文英文左右padding一致两端对齐实现