DOM的节点访问以及操作
来源:互联网 发布:linux tomcat 启动空白 编辑:程序博客网 时间:2024/06/05 14:26
1.DOM的节点访问
DOM节点的关系如下图:
其中兄弟节点和子节点有个浏览器兼容的问题,以nextSibling为例,nextSibling在ie678才有效,而nextElementSibling在正常浏览器才有效。兼容的写法如下:
var div = one.nextElementSibling || one.nextSibling;div.style.backgroundColor = "red";//注意:必须先写正常浏览器,在写ie678.
previousSibling,firstChild和lastChild也有类似的操作。
比较常用的是父节点parentNode和所有子节点(childNodes和children)。
其中需要注意的是所有子节点的两种写法的区别:
1.childNodes是标准写法,但是他的所有子节点包括了元素节点,属性节点和文本节点,当我们需要元素节点的时候,需要使用nodeType == 1 来判断获取,有点麻烦。nodeType == 2:代表属性节点;nodeType == 3代表文本节点。需要注意的是,使用这种写法,会将换行也当做其字节点算入所有子节点中。
2.children是使用的比较多的写法,获取到的所有子节点仅包括元素节点,所以使用起来比较方便和实用,只需要注意的一点是在高端浏览器上,比如谷歌和火狐中,会将注释也当做子节点,这点是需要避免的。
2.DOM节点操作
DOM节点操作常用的有新建节点,插入节点,删除节点以及克隆节点
新建节点,creatElement():
var li = document.creatElement("li");
这句代码意思就是创建一个li元素节点插入节点:appendChild();和insertBefore(插入的节点,参照节点)。插入节点的方法有两种,
1.appendChild(),是将某节点插入到某节点子节点的后面,注意是插入到最后面:
2.insertBefore(插入的节点,参照节点)是将节点添加到参照节点的前面
var f = document.getElementById("demo");var div = document.createElement("div");f.appendChild(div);//插入到f节点里面最后面一个var p = document.createElement("p");f.insertBefore(p,div);//在div节点前插入p节点
删除节点:removeChild();字面意义可以知道是移除某元素的子节点。此处的移除是指彻底的移除,删除,而不是隐藏。
克隆节点:cloneNode(true/false);括号里面可以有两个参数选择,谁调用这个方法,就克隆谁,两个参数的意义各不相同,true是指深度克隆,指会将元素里面的所有节点都一模一样克隆复制出来;而false是浅克隆,指只克隆该元素一个节点,不会将内部节点克隆出来。
- DOM的节点访问以及操作
- js的DOM节点访问与操作
- DOM节点的操作
- Dom节点的操作
- js Dom节点的获取 以及相关操作
- js-Dom节点的获取-以及相关操作
- web 学习笔记5-DOM以及节点的操作
- 访问受控的dom节点
- Dom 节点的属性访问
- DOM节点访问关系与操作示例
- javascript 以及 jquery DOM节点操作
- Dom中节点的操作
- DOM删除节点的操作
- DOM对象-节点的操作
- JS 中DOM节点的访问关系
- JavaScript的DOM操作(节点操作)
- JavaScript的DOM操作(节点操作)
- JS对DOM节点的操作--增加节点,删除节点
- 2.3线性表的链式表示和实现(2)-静态链表(1)
- nodejs queryString模块
- qt sqlite找不到数据库问题
- 一位资深程序员大牛给予Java初学者的学习路线建议
- UTF-8编码的空格(194 160)问题
- DOM的节点访问以及操作
- Win10系统小娜搜索不到应用程序?小娜无法搜索本地应用
- 如何快速转载CSDN中的博客
- opencv 编译及Simple
- access
- 日记20171118
- JDBC学习笔记(一)
- Oauth2.0认证原理
- easyUI学习