DOM节点访问关系与操作示例
来源:互联网 发布:三峡大学网络课程 编辑:程序博客网 时间:2024/05/19 23:02
一.DOM 访问关系(节点的获得)
节点的访问关系,是以属性的方式存在的。
DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问。
父节点 ( parentNode )
调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.
//box1是box的父节点 var box2 = document.getElementsByClassName("box2") [0]; var box2 = document.getElementById("box2") console.log(box2.parentNode);//在控制台中打印父盒子box1
兄弟节点
Sibling就是兄弟的意思。
Next:下一个的意思。
Previous:前一个的意思。
nextSibling:调用者是节点。IE678中指下一个元素节点(标签)。在火狐谷歌IE9+以后都指的是下一个节点(包括空文档和换行节点)。
nextElementSibling:在火狐谷歌IE9都指的是下一个元素节点。
总结:在IE678中用nextSibling,在火狐谷歌IE9+以后用nextElementSibling
//通常的代码书写格式下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling
//nextElementSibling下一个兄弟节点console.log(box2.nextElementSibling);
previousSibling:调用者是节点。IE678中指前一个元素节点(标签)。在火狐谷歌IE9+以后都指的是前一个节点(包括空文档和换行节点)。
previousElementSibling:在火狐谷歌IE9都指的是前一个元素节点。
//通常的代码书写格式前一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling
单个子节点
firstChild:调用者是父节点。IE678中指第一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是第一个节点(包括空文档和换行节点)。
firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
//通常的代码书写格式第一个子节点=父节点.firstElementChild || 父节点.firstChild
lastChild:调用者是父节点。IE678中指最后一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是最后一个节点(包括空文档和换行节点)。
lastElementChild:在火狐谷歌IE9都指的最后一个元素节点。
//通常的代码书写格式第一个子节点=父节点.lastElementChild|| 父节点.lastChild
所有子节点
childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点 (他还是W3C的亲儿子 )
火狐 谷歌等高本版会把换行也看做是子节点
nodeType==1时才是元素节点(标签)
nodeType == 1 表示的是元素节点 记住 元素就是标签
nodeType == 2 表示是属性节点 了解
nodeType == 3 是文本节点 了解
//通常的代码书写格式子节点数组 = 父节点.childNodes; //获取所有节点。
children:非标准属性,它返回指定元素的子元素集合。
但它只返回HTML节点,甚至不返回文本节点,虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点
在IE678中,注释节点不要写在里面。
//通常的代码书写格式子节点数组 = 父节点.children; //用的最多。
DOM的节点操作
获取:getAttribute(名称)
设置:setAttribute(名称, 值)
删除:removeAttribute(名称)
注意:IE6、7不支持。
调用者:节点。 有参数。 没有返回值。
每一个方法意义不同。
创建
var aaa = document.createElement("li");var bbb = document.createElement("afadsfadsf"); console.log(aaa);//box中多出li标签 console.log(bbb);//box中多出afadsfadsf标签
添加
var box1 = document.getElementsByClassName("box1")[0]; box1.appendChild(aaa); box1.insertBefore(bbb,aaa);//在bbb之前添加aaa
删除
box1.removeChild(bbb); aaa.parentNode.removeChild(aaa);//自杀,自己删除自己
克隆
var ccc = box1.cloneNode();//只克隆节点本身不克隆内容 var ddd = box1.cloneNode(true);//克隆节点本身和节点内容 console.log(ccc); console.log(ddd);
总体代码
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div class="box1"> <div class="box2" id="box2"></div> <div class="box3"></div></div><script> //节点的访问关系是以属性形式存在 //1.box1是box的父节点// var box2 = document.getElementsByClassName("box2")[0];// var box2 = document.getElementById("box2")// console.log(box2.parentNode);//// //2.nextElementSibling下一个兄弟节点// console.log(box2.nextElementSibling);//// //firstElementChild第一个子节点// console.log(box2.parentNode.firstElementChild);//// //所有子节点// console.log(box2.parentNode.childNodes);// console.log(box2.parentNode.children); //节点的操作 //1.创建 var aaa = document.createElement("li"); var bbb = document.createElement("afadsfadsf"); console.log(aaa); console.log(bbb); //添加 var box1 = document.getElementsByClassName("box1")[0]; box1.appendChild(aaa); box1.insertBefore(bbb,aaa); //删除 box1.removeChild(bbb); aaa.parentNode.removeChild(aaa);//自杀,自己删除自己 //克隆 var ccc = box1.cloneNode();//只克隆节点本身不克隆内容 var ddd = box1.cloneNode(true);//克隆节点本身和节点内容 console.log(ccc); console.log(ddd);</script></body></html>
节点属性的操作
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function () { var eleNode = document.getElementsByTagName("img")[0]; //属性、赋值获取两种方式 //1.元素节点.属性或者元素节点[属性] eleNode.src = "image/jd2.png"; eleNode.aaa = "bbb"; console.log(eleNode.aaa); console.log(eleNode.src); console.log(eleNode.tagName); console.log(eleNode["title"]); console.log(eleNode["className"]); console.log(eleNode["alt"]); //2.元素节点.方法(); console.log(eleNode.getAttribute("id")); eleNode.setAttribute("id","你好"); eleNode.setAttribute("ccc","ddd"); eleNode.removeAttribute("id"); } </script></head><body><img src="image/jd1.png" class="box" title="图片" alt="京东狗" id="aaa"/></body></html>
阅读全文
0 0
- DOM节点访问关系与操作示例
- js的DOM节点访问与操作
- DOM(二)DOM节点关系与操作
- JS 中DOM节点的访问关系
- 利用DOM节点关系访问HTML元素
- Javascript DOM 的节点操作示例
- 访问DOM节点3——通过节点关系
- DOM的节点访问以及操作
- dom节点间关系
- DOM节点关系
- DOM 节点关系
- DOM 访问节点
- XML DOM 访问节点
- dom访问节点
- 核心Dom节点访问
- javase36补充(DOM节点的层次关系 操作节点 节点增删改查)
- javascript操作dom 建立 增加 删除 克隆 访问节点
- javascript操作dom 建立 增加 删除 克隆 访问节点
- 深入理解线程局部变量:ThreadLocal
- Java-jar包的简单操作
- JavaScript中的字符串,数组,替换
- A-B Game --贪心
- 最小生成树(MST)的Kruskal实现
- DOM节点访问关系与操作示例
- POSIX信号量实现互斥
- 谷歌正考虑商用量子计算服务
- 《致橡树》 舒婷
- Eclipse 使用mybatis generator插件自动生成代码
- vim常用命令附带几个Markdown常用数学符号
- Vue axios与FormData结合提交文件,并且展示用户图片文件
- Annotation成员的读取
- SPI总线的初步认识