【DOM 编程艺术】3.4 节点
2017-09-20 14:05
393 查看
节点分为:元素节点、文本节点和属性节点等。
标签的名字就是元素的名字,即元素节点可以理解为html中的标签。
在上面的代码中,p标签包含的内容是“don’t forgrt to buy this stuff”,这就是一个文本节点,即元素节点之间的文本。
属性节点用来对元素做出更具体的描述,如代码中title=”a genele reminder”就是一个属性节点,即html标签中的属性值。
方法返回一个与那个给定id属性值的元素节点对应的对象。
例如下面的代码:
输出的结果是:
该方法返回的是一个对象数组
输出的结果是:
获取元素的个数:
上面的代码有多少个元素节点:
返回类型与getElementsByTagName相似,返回一个具有相同类名的元素的数组。
输出结果:
由于低版本的ie浏览器不支持getElementsByClassName方法,可用以下函数来代替:
两个参数:node表示DOM树中的搜索起点,即上下文;classname就是要搜索的类名
一份文档就是一颗节点树。
每个节点都是一个对象。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.4 节点</title> </head> <body> <h1>what to buy</h1> <p title="a genele reminder">don't forgrt to buy this stuff</p> <ul id="purchases"> <li>A tin of beans</li> <li class="sale">cheese</li> <li class="sale important">milk</li> </ul> </body> </html>
标签的名字就是元素的名字,即元素节点可以理解为html中的标签。
在上面的代码中,p标签包含的内容是“don’t forgrt to buy this stuff”,这就是一个文本节点,即元素节点之间的文本。
属性节点用来对元素做出更具体的描述,如代码中title=”a genele reminder”就是一个属性节点,即html标签中的属性值。
获取元素
有三种DOM方法可以获取元素节点,分别是通过元素ID、通过标签名和通过类名来获取。1.getElementById |
例如下面的代码:
<script type="text/javascript"> var oUl = document.getElementById("purchases"); console.log(oUl); </script>
输出的结果是:
<ul id="purchases"> <li>A tin of beans</li> <li class="sale">cheese</li> <li class="sale important">milk</li> </ul>
2.getElementsByTagName |
<script type="text/javascript"> var oLi = document.getElementsByTagName("li"); console.log(oLi); </script>
输出的结果是:
获取元素的个数:
var length = document.getElementsByTagName("li").length; //3
上面的代码有多少个元素节点:
console.log(document.getElementsByTagName("*").length); //12
3.getElementsByClassName |
<script type="text/javascript"> var cheese = document.getElementsByClassName("sale"); console.log(cheese); </script>
输出结果:
由于低版本的ie浏览器不支持getElementsByClassName方法,可用以下函数来代替:
<script type="text/javascript"> function getElementsByClassName(node, classname) { if (node.getElementsByClassName) { return node.getElementsByClassName(classname); } else { var results = new Array; var tag = node.getElementsByTagName("*"); for (var i = 0; i < tag.length; i++) { if (tag[i].className.indexOf(classname) != -1) { results[results.length] = tag[i]; } } return results; } } var oUl = document.getElementById("ul"); var oLi = getElementsByClassName(oUl, "sale"); console.log(oLi); </script>
两个参数:node表示DOM树中的搜索起点,即上下文;classname就是要搜索的类名
一份文档就是一颗节点树。
每个节点都是一个对象。
相关文章推荐
- 【DOM编程艺术】styleHeaderSibling函数以及nextSibling延伸(-获取下个元素节点)
- Javascript DOM 编程艺术:dom 节点及操作节点方法
- DOM编程艺术(节点操作)
- 【DOM编程艺术】动态创建标记(签)---创建和插入节点
- JS DOM编程艺术-笔记
- JS DOM编程艺术——CSS-DOM—— JS学习笔记2015-7-19(第87天)
- JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)
- JS DOM编程艺术——JS综合实例—— JS学习笔记2015-7-29(第92天)
- JavaScript DOM 编程艺术(第2版)读书笔记(2)
- <<Javascript Dom 编程艺术(第二版)>>摘录
- 【JavaScript DOM 编程艺术】 笔记
- JavaScript DOM编程 学习笔记-替换节点
- 【DOM编程艺术】实时动画--进一步
- JavaScript_DOM编程艺术第二版学习笔记-第6章
- JavaScript Dom 编程艺术
- JavaScript_DOM编程艺术第二版学习笔记-第7章
- JavaScript_DOM编程艺术(第二版)第二章
- DOM编程艺术(音频、视频)
- Dom编程艺术第三章
- DOM 编程艺术 实用代码段