【DOM 编程艺术】3.4 节点

来源：互联网发布：淘宝全球购在哪里编辑：程序博客网时间：2024/06/03 19:43

节点分为：元素节点、文本节点和属性节点等。

<!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

方法返回一个与那个给定id属性值的元素节点对应的对象。
例如下面的代码：

<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

返回类型与getElementsByTagName相似，返回一个具有相同类名的元素的数组。

<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就是要搜索的类名

一份文档就是一颗节点树。
每个节点都是一个对象。

阅读全文

0 0