【Javascript】 DOM节点

　　HTML文档中一切都是节点！

　　　　整个文档是文档节点；

　　　　注释是注释节点；

　　　　每一个HTML元素都是一个元素节点；

　　　　元素内的文本内容是文本节点；

　　　　连元素的每一个属性都是一个属性节点。

　　　　看到这些是不是感觉很熟悉，没错，就像JS中一切都是对象一样，HTML文档中一切都是节点。

　我们可以使用各种访问节点的方法，对任意一个节点进行增删改查等等操作。从而达到对整个页面的各种操作。

　　增：

　　　　如果要向HTML添加一个元素，需要先创建一个元素(元素节点)，然后再将其追加到已有的元素上。

　　　　创建元素节点newNode：

　　　　　　var newNode = document.createElement(String tagName)

　　　　创建元素内的文本节点：

　　　　　　var textNode = document.createTextNode(String data)

　　　　把文本节点textNode添加到新建的元素节点newNode上：

　　　　　　newNode.appendChild(textNode)

　　　　把新建的元素节点newNode添加到已存在的元素节oldNode点末尾：

　　　　　　oldNode.appendChild(newNode)

　　　　或者把新建的元素节点newNode添加到已存在的元素节点oldNode的某个子节点childNode前：

　　　　　　oldNode.insertBefore(newNode,childNode)

　　　　例子：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 5         <script src="jquery.js"></script>
 6         <script type="text/javascript">
 7             window.onload = function(){
 8                 var pp = document.createElement("li");
 9                 var hh1 = document.createElement("h1");
10                 var ttext = document.createTextNode("这是新添加的元素节点!");
11                 pp.appendChild(hh1);
12                 hh1.appendChild(ttext);
13                 var ull = document.getElementById("ul");
14                 ull.appendChild(pp);
15             }
16         </script>
17         <style type="text/css">
18             ul {
19                 border: 1px solid ;
20                 margin: 100px auto;
21                 width: 400px;
22                 list-style-type: none;
23             }
24         </style>
25         <title>JS</title>
26     </head>
27     <body>
28         <ul id="ul">
29             <li><h1>这是第一行！</h1></li>
30             <li><h1>这是第二行！</h1></li>
31         </ul>
32     </body>
33 </html>

　　效果：

　　删：

　　　　查找到将要删除的节点removeNode和该节点的父节点parentNode后

　　　　　　parentNode.removeChild(removeNode)

　　　　例子：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 5         <script src="jquery.js"></script>
 6         <script type="text/javascript">
 7             window.onload = function(){
 8                 var pp = document.createElement("li");
 9                 var hh1 = document.createElement("h1");
10                 var ttext = document.createTextNode("这是新添加的元素节点!");
11                 pp.appendChild(hh1);
12                 hh1.appendChild(ttext);
13                 var ull = document.getElementById("ul");
14                 ull.appendChild(pp);
15
16                 var li1 = document.getElementById("li1");
17                 ull.removeChild(li1);
18             }
19         </script>
20         <style type="text/css">
21             ul {
22                 border: 1px solid ;
23                 margin: 100px auto;
24                 width: 400px;
25                 list-style-type: none;
26             }
27         </style>
28         <title>JS</title>
29     </head>
30     <body>
31         <ul id="ul">
32             <li id="li1"><h1>这是第一行！</h1></li>
33             <li><h1>这是第二行！</h1></li>
34         </ul>
35     </body>
36 </html>

　　效果：

　　改：
　　　　查找到某个需要改动的元素节点node，然后对其文本、样式等进行改动

　　　　改动其样式：

　　　　　　node.style.color="red"

　　　　改动其文本：

　　　　　　node.innerHTML="string"

　　　　实例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 5         <script src="jquery.js"></script>
 6         <script type="text/javascript">
 7             window.onload = function(){
 8                 var pp = document.createElement("li");
 9                 var hh1 = document.createElement("h1");
10                 var ttext = document.createTextNode("这是新添加的元素节点!");
11                 pp.appendChild(hh1);
12                 hh1.appendChild(ttext);
13                 var ull = document.getElementById("ul");
14                 ull.appendChild(pp);
15
16                 var li1 = document.getElementById("li1");
17                 ull.removeChild(li1);
18
19                 var li2 = document.getElementById("li2");
20                 li2.style.color="red";
21                 li2.innerHTML="改变了颜色和文本的第二行！"
22             }
23         </script>
24         <style type="text/css">
25             ul {
26                 border: 1px solid ;
27                 margin: 100px auto;
28                 width: 400px;
29                 list-style-type: none;
30             }
31         </style>
32         <title>JS</title>
33     </head>
34     <body>
35         <ul id="ul">
36             <li id="li1"><h1>这是第一行！</h1></li>
37             <li id="li2"><h1>这是第二行！</h1></li>
38         </ul>
39     </body>
40 </html>

　　效果：

　　查:

　　　　我们除了应用getElementById()、getElementsByTagName()和getElementClassName()来获取特定的元素节点之余，我们还可以用getAttribute(String attribute) 来获取特定元素节点的某一个属性的值，并通过setAttribute(attrName,attrValue)来改变该属性的值。

　　　　实例：

 1 <script type="text/javascript">
 2             window.onload = function(){
 3                 var pp = document.createElement("li");
 4                 var hh1 = document.createElement("h1");
 5                 var ttext = document.createTextNode("这是新添加的元素节点!");
 6                 pp.appendChild(hh1);
 7                 hh1.appendChild(ttext);
 8                 var ull = document.getElementById("ul");
 9                 ull.appendChild(pp);
10
11                 var li1 = document.getElementById("li1");
12                 ull.removeChild(li1);
13
14                 var li2 = document.getElementById("li2");
15                 li2.style.color="red";
16                 li2.innerHTML="改变了颜色和文本的第二行！"
17
18                 alert(li2.getAttribute("style"));19             }
20 </script>

　　效果：

　　除此之外，我们还可以通过某个节点的nodeName、nodeType和nodeValue获取节点的更多信息：

　　nodeName属性规定节点的名称:　

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同　　
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

　　　　注释：nodeName 始终包含 HTML 元素的大写字母标签名。

　　nodeValue 属性规定节点的值:

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

　　nodeValue 属性规定节点的值:

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

转载于:https://www.cnblogs.com/linxiong945/p/4080240.html

【Javascript】 DOM节点相关推荐

JavaScript DOM节点
attributes属性: 返回该元素节点的属性节点集合. box.attributes //[object NamedNodeMap] box.attributes.length; //返回属性节点 ...
javascript dom节点x
一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); var parent = test.pare ...
ajax更改dom,javascript – 用Ajax响应替换DOM节点
我有一个ajax响应,看起来像这样: some other text 我想用resp替换下面的element1: 所以在替换后我会得到: some other text 我尝试了replaceChil ...
html dom节点类型,浅谈Javascript中的12种DOM节点类型
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
Javascript元编程创建DOM节点
在使用javascript创建DOM节点的过程中,难免要使用document.createElement.setAttribute. document.createTextNode等冗长.还有浏览器兼 ...
html dom 替换节点,从javascript dom文本节点替换
我正在使用javascript处理xhtml.我通过连接nodeType == Node.TEXT_NODE的所有子节点的nodeValue来获取div节点的文本内容.从javascript dom文 ...
java dom 获得子元素_在JavaScript中删除DOM节点的所有子元素
我将如何删除JavaScript中DOM节点的所有子元素? 说我有以下(丑陋的)HTML: hello world 我抓住了我想要的节点,如下所示: var myNode = document.get ...
JavaScript——DOM之节点操作
节点操作前述: 一.节点的概述二.节点操作 1.节点层级 2.案列-下拉菜单 3.兄弟节点 4.创建节点 5.删除节点 6.案列 :留言并且删除节点 7.复制节点 8.案例:动态生成表格 9.三种 ...
JavaScript 插入Dom节点
大家好,今天我们来分享JavaScript 插入Dom节点首先我们要知道, 不管我们对Dom节点进行什么样的操作,都必须先获取这个节点,假如说,这个dom节点是空的,我们可以通过innerHTML就 ...
【JavaScript】添加DOM节点
[JavaScript]添加DOM节点原创刘甜- 最后发布于2019-03-24 19:59:39 阅读数 310 收藏展开 HTML DOM树当网页被加载时,浏览器会创建页面的文档对象模型( ...

【Javascript】 DOM节点

【Javascript】 DOM节点相关推荐

最新文章

热门文章