HTML DOM

来源：互联网发布：大数据可以自学么编辑：程序博客网时间：2024/06/14 10:47

节点及其类型

元素节点
属性节点：元素的属性，可以直接通过属性的方法来操作。
文本节点：元素节点的子节点，其内容为文本。

HTML 文档编写 js 代码的位置

一般，在 body 节点之前编写 js 代码，利用 window.onload 事件，在当前文档完全加载之后被触发，可以获取到当前文档的任何节点。

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>JavaScript HTML DOM 测试</title>    <script type="text/javascript">        ......    </script></head><body>    ......</body></html>

获取元素节点

document.getElementById()：根据 id 属性获取对应的单个节点，如果找到相应的元素则返回该元素的 Element 对象，如果不存在，则返回 null 。

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>HTML DOM 测试</title>    <script type="text/javascript">        window.onload = function(){            //返回 id 为 city 的节点            var cityNode = document.getElementById("city");            alert(cityNode);            //返回 id 为 sz 的节点            var szNode = document.getElementById("sz");            alert(szNode);        }    </script></head><body>    <p>        <p>你喜欢哪个城市?</p>        <ul id="city">            <li id="sz">深圳</li>            <li>北京</li>            <li>上海</li>            <li>广州</li>            <li>武汉</li>        </ul>    </p></body></html>

document.getElementsByTagName()：根据标签名返回一个指定节点名的对象数组 HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。
数组对象 length 属性可以获取数组的长度。

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>HTML DOM 测试</title>    <script type="text/javascript">        window.onload = function(){            //使用标签名 li 获取指定节点的集合            var liNodes = document.getElementsByTagName("li");            alert(liNodes);            alert(liNodes.length);            //document 对象方法获取 city 的 Node 节点            var cityNode = document.getElementById("city");            //Node 接口方法获取 li 节点集合            var cityLiNodes = cityNode.getElementsByTagName("li");            alert(cityLiNodes);            alert(cityLiNodes.length);        }    </script></head><body>    <p>        <p>你喜欢哪个城市?</p>        <ul id="city">            <li id="sz">深圳</li>            <li>北京</li>            <li>上海</li>            <li>广州</li>            <li>武汉</li>        </ul>    </p></body></html>

document.getElementsByName()：根据节点的 name 属性获取相同名称(name)的元素，返回一个对象数组 object NodeList。

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>HTML DOM 测试</title>    <script type="text/javascript">        window.onload = function(){            //根据 HTML 文档元素的 name 属性名来获取指定的节点的集合            var genderNodes = document.getElementsByName("gender");            alert(genderNodes);            alert(genderNodes.length);        }    </script></head><body>    <p>        性别：        <input type="radio" name="gender" value="male">男</input>        <input type="radio" name="gender" value="female" checked="checked">女</input>    </p></body></html>

获取属性节点

可以直接通过 node.id 这样的方式来获取和设置属性节点的值。

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>HTML DOM 测试</title>    <script type="text/javascript">        window.onload = function(){            //获取 name 的元素节点            var nameNode = document.getElementById("name");            //读取元素节点的属性值            alert(nameNode.value);            //设置元素节点的属性值            nameNode.value = "Kevin";        }    </script></head><body>    <p>        姓名：<input type="text" id="name" name="username" value="UserName"></input>    </p></body></html>

获取元素节点的子节点

通过调用元素节点的 getElementsByTagName() 方法来获取。

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>HTML DOM 测试</title>    <script type="text/javascript">        window.onload = function(){            //获取元素节点            var cityNode = document.getElementById("city");            //获取元素节点子节点的集合            var cityLiNodes = cityNode.getElementsByTagName("li");            alert(cityLiNodes);            alert(cityLiNodes.length);            //元素节点第一个子节点            alert(cityNode.firstChild);            //元素节点最后一个子节点            alert(cityNode.lastChild);        }    </script></head><body>    <p>        <p>你喜欢哪个城市?</p>        <ul id="city">            <li id="sz">深圳</li>            <li>北京</li>            <li>上海</li>            <li>广州</li>            <li>武汉</li>        </ul>    </p></body></html>

获取文本节点

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>HTML DOM 测试</title>    <script type="text/javascript">        window.onload = function(){            //获取文本节点所在的元素节点            var szNode = document.getElementById("sz");            //通过 firstChild 定义到文本节点            var szNodeText = szNode.firstChild;            //读取文本节点的值            alert(szNodeText.nodeValue);            //设置文本节点的值            szNodeText.nodeValue = "广东省深圳市经济特区";        }    </script></head><body>    <p>        <p>你喜欢哪个城市?</p>        <ul id="city">            <li id="sz">深圳</li>            <li>北京</li>            <li>上海</li>            <li>广州</li>            <li>武汉</li>        </ul>    </p></body></html>

节点的属性

文档中任何一个节点都有 nodeName ， nodeType ， nodeValue 属性，id ， name ， value 是具体节点的属性。
nodeName：代表当前节点的名字，只读属性。如果给定节点是一个文本节点， nodeName 属性将返回内容为 #text 的字符串。
nodeType：返回一个整数, 这个数值代表着给定节点的类型，只读属性。
- 1：元素节点
- 2：属性节点
- 3：文本节点
nodeValue：返回给定节点的当前值(字符串)，可读写的属性。
- 元素节点：返回值是 null。
- 属性节点：返回值是这个属性的值。
- 文本节点：返回值是这个文本节点的内容。

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>HTML DOM 测试</title>    <script type="text/javascript">        window.onload = function(){            //元素节点            var szNode = document.getElementById("sz");            alert(szNode.nodeName);     //元素节点名: li            alert(szNode.nodeType);     //元素节点类型: 1            alert(szNode.nodeValue);    //元素节点没有 nodeValue 属性值: null            //属性节点            var nameAttr = document.getElementById("name").getAttributeNode("name");            alert(nameAttr.nodeName);   //属性节点的节点名：name            alert(nameAttr.nodeType);   //属性节点类型: 2            alert(nameAttr.nodeValue);  //属性节点的 nodeValue 属性值：username            //文本节点            var nodeText = szNode.firstChild;            alert(nodeText.nodeName);   //文本节点名: #text            alert(nodeText.nodeType);   //文本节点类型：3            alert(nodeText.nodeValue);  //文本节点的 nodeValue 属性值: 深圳        }    </script></head><body>    <p>        <p>你喜欢哪个城市?</p>        <ul id="city">            <li id="sz">深圳</li>            <li>北京</li>            <li>上海</li>            <li>广州</li>            <li>武汉</li>        </ul>    </p>    <p>        姓名：<input type="text" id="name" name="username" value="UserName"></input>    </p></body></html>

创建元素节点

createElement()：按照给定的标签名创建一个新的元素节点。方法只有一个参数：被创建的元素节点的名字，是一个字符串。方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的 nodeType 属性值等于 1。
新元素节点不会自动添加到文档里，它只是一个存在 JavaScript 上下文的对象。

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>HTML DOM 测试</title>    <script type="text/javascript">        window.onload = function(){            var liNodes = document.getElementsByTagName("li");            alert(liNodes.length);            //新创建一个元素节点, 返回值为指向元素节点的引用。            var liNode = document.createElement("li");            //创建文本节点，参数为文本值, 返回该文本节点的引用。            var whText = document.createTextNode("武汉");            liNode.appendChild(whText);            //新添加 newChild 子节点, 该子节点将作为 elementNode 的最后一个子节点。            var cityNode = document.getElementById("city");            cityNode.appendChild(liNode);        }    </script></head><body>    <p>        <p>你喜欢哪个城市？</p>        <ul id="city">            <li id="sz">深圳</li>            <li>上海</li>            <li>北京</li>        </ul>    </p></body></html>

创建文本节点

createTextNode()：创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。它是一个文本节点，所以它的 nodeType 属性等于 3。
方法只有一个参数：新建文本节点所包含的文本字符串。新元素节点不会自动添加到文档里。

为元素节点添加子节点

appendChild()：

节点替换

replaceChild()：

插入节点

insertBefore()：
insertAfter()：

删除节点

removeChild()：

0 0