DOM属性及操作
来源:互联网 发布:dota2饰品交易知乎 编辑:程序博客网 时间:2024/06/05 19:25
DOM属性及操作
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)
一、同胞节点
previousSibling属性和nextSibling属性
if(someNode.nextSibling===null){ alert("Last node in the parent's childNodes list.");}else if(someNode.previousSibling===null){ alert("First node in the parent's childNodes list.");}
二、appendChild()
appendChild(),用于向childNodes列表的末尾添加一个节点。
var returnedNode=someNode.appendChild(newNode);alert(returnedNode==newNode); //truealert(someNode.lastChild==newNode); //true
如果传入到appendChild()中的节点已经是文档的一部分了,那结果就是将该节点从原来的位置移到新位置。如果在调用appendChild()时传入了父节点的第一个子节点,那么该节点就会成为父节点的最后一个子节点。
//someNode有多个子节点var returnedNode=someNode.appendChild(someNode.firstChild);alert(returnedNode==someNode.firstChild); //falsealert(returnedNode==someNode.lastChild); //true
三、insertBefore()
这个方法接受两个参数:要插入的节点和作为参数的节点。
//插入后成为最后一个子节点returnedNode=someNode.insertBefore(newNode,null);alert(newNode==someNode.lastChild); //true//插入后成为第一个子节点var returnedNode=someNode.insertBefore(newNode,someNode.firstChild);alert(returnedNode==newNode); //truealert(newNode==someNode.firstChild); //true//插入到最后一个子节点前面returnedNode=someNode.insertBefore(newNode,someNode.lastChild);alert(newNode==someNode.childNodes[someNode.childNodes.length-2]); //true
四、replaceChild()
replaceChild()方法接受的两个参数是:要插入的节点和要替换的节点
//替换第一个子节点var returnedNode=someNode.replaceChild(newNode,someNode.firstChild);//替换最后一个子节点returnedNode=someNode.replaceChild(newNode,someNode.lastChild);
五、removeChild()
这个方法接受一个参数,即要移除的节点
//移除第一个子节点var formerFirstChild=someNode.removeChild(someNode.firstChild);//移除最后一个子节点var formerLastChild=someNode.removeChild(someNode.lastChild);
六、cloneNode()
cloneNode()用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()方法接受一个布尔参数值,表示是否执行深复制。参数为true,执行深复制,也就是复制节点及其整个子节点数,参数为false,执行浅复制,即复制节点本身。
假设有下面的HTML代码:
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li></ul>
如果我们已经将ul元素的引用保存在了变量myList中,那么通常下面代码就可以看出使用cloneNode()方法的两种模式。
var deepList=myList.cloneNode(true);alert(deepList.childNodes.length); //3(IE<9)或7(其他浏览器)var shallowList=myList.cloneNode(false);alert(shallowList.childNodes.length); //0
七、normalize()
当在某个节点上调用该方法时,就会在该节点的后代节点中查找,如果查到空文本节点,则删除它,如果找到相邻的文本节点,则将它们合并为一个文本节点。
0 0
- DOM属性及操作
- js-dom操作的属性及方法
- jQuery核心:DOM操作及属性方法
- DOM编程--属性操作
- DOM属性操作
- 操作dom中属性
- DOM编程-属性操作
- dom对属性操作实例
- jquery随记(DOM操作)---操作属性
- jQuery基础教程之DOM操作-属性操作
- jQuery之dom操作(属性、样式操作)
- jQuery DOM操作之属性操作
- DOM基础及DOM操作HTML
- 【Ajax】DOM基础及DOM操作HTML
- JSBL_事件及DOM操作
- DOM 操作表格及样式
- DOM 操作表格及样式
- Javascript Dom节点及操作
- ubuntu 一键安装jdk 1.79
- 【CSS3】边框--慕课网【学习总结】
- some characters cannot be mapped using"ISO-8859-1'/ GBK MYeclipse
- 基本数据类型转换以及时间格式化
- 【Android】SQLite实例(多线程下安全访问数据库)
- DOM属性及操作
- 跟我一起写 Makefile(五)
- DOM元素点击失效问题
- 写出高质量代码的10个Tips
- think in java (com.bruceeckel.simpletest)配置
- 树状数组(LA4329,UVaLive4329,Ping pong)
- No symbol "xxx" in current context
- 实战Nginx与PHP(FastCGI)的安装、配置与优化
- linux cache总结