JavaScript学习笔记（DOM 导航、节点、集合、节点列表）

JavaScript学习笔记（DOM 导航、节点、集合、节点列表）
@[TOC](JavaScript学习笔记（DOM 导航、节点、集合、节点列表）)
DOM节点
节点关系：
在节点之间导航
子节点和节点值
1. 取出h1元素中的文本并复制到P元素中：(第一种)
2. 取出h1元素中的文本并复制到P元素中：(第二种)
3. 取出h1元素中的文本并复制到P元素中：(第三种)
JavaScript HTML DOM 元素（节点）
添加和删除节点(HTML元素)
创建新的HTML元素-insertBefore()
删除已有HTML元素（removeChild）
替换HTML元素(replaceChild)
JavaScript HTML DOM 集合
HTMLCollectioin 对象
HTML HTMLCollection长度
实例：改变所有p元素的背景色：
HTMLCollection并非数组！
HTML DOM NOdeList长度：
改变节点列表中所有p元素的背景色：

通过HTMLDOMain能够使用节点关系来导航节点树。

DOM节点

W3CHTML DOM标准，HTML文档中的所有的事物都节点：

整个文档是文档节点
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
所有注释是注释节点

有了HTML DOM，节点树中的所有节点才能通过JavaScript来访问。
能够创建新节点，还可以修改和删除所有节点。

节点关系：

节点树中的节点彼此之间有一定的等级关系。

术语(父、子和同胞,parent、child以及sibling)用于描述这些关系。
在节点树中，顶端节点被称为根(根节点)。
每个节点都有父节点，除了根(根节点没有父节点)。
节点能够拥有一定数量的子
同胞(兄弟或者姐妹)指的是拥有相同节点父的节点。

<html>
	<head>
		<title>DOM </title>
	</head>
	<body>
		<h1> 第一课</h1>
		<p> Hello World!</p>
	</body>
</html>

从以上的HTML中能够读到以下信息：

html是根节点
html没有父
html是head和body的父
head是html的第一个子
body是html的最后一个子
同时：
head有一个子：title
title有一个子(文本节点)：“DOM”
body有两个子：h1 和 p
h1有一个子：第一课
p有一个子：Hello World!
h1 和 p是同胞

在节点之间导航

通过JavaScript，可以使用以下节点属性在节点之间导航：

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

子节点和节点值

DOM处理中的一种常见错误是认为元素节点中包含文本。
实例：

<title id = "demo"> DOM 教程</title>

它包含了值为"DOM 教程"的文本节点。

文本节点的值能够通过节点的innerHTML 属性进行访问：

var myTitle = document.getElementById("demo").innerHTML;

访问innerHTML 属性等同于访问首个子节点的nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

访问第一个子节点：

var myTitle = document.getElement("demo").childNodes[0].nodeValue;

1. 取出h1元素中的文本并复制到P元素中：(第一种)

<body>

    <h1 id="id01">我的第一张网页</h1>
    <p id="id02">Hello!</p>

    <script>
      document.getElementById("id02").innerHTML = 
      document.getElementById("id01").innerHTML;
    </script>
</body>

2. 取出h1元素中的文本并复制到P元素中：(第二种)

<body>

    <h1 id="id01">我的第一张网页</h1>
    <p id="id02">Hello!</p>

    <script>
      document.getElementById("id02").innerHTML = 
      document.getElementById("id01").firstChild.nodeValue;
    </script>
</body>

3. 取出h1元素中的文本并复制到P元素中：(第三种)

<body>

    <h1 id="id01">我的第一张网页</h1>
    <p id="id02">Hello!</p>

    <script>
      document.getElementById("id02").innerHTML = 
      document.getElementById("id01").childNodes[0].nodeValue;
    </script>
</body>

InnerHTML
使用innerHTML取回HTML元素的内容。

DOM 根节点
有两个特殊属性允许访问完整文档：

document.body - 文档的body
document.documentElement - 完整文档
实例：

	<p>Hello World!</p>

    <div>
        <p>DOM 很有用</p>

        <p>本例演示：<b>doucument.body</b>属性。</p>
    </div>

    <script>
      alert(document.body.innerHTML);
    </script>

第二种：

	<p>Hello World!</p>

    <div>
        <p>DOM 很有用</p>

        <p>本例演示：<b>doucument.documentElement</b>属性。</p>
    </div>
    <script>
      alert(document.documentElement.innerHTML);
    </script>

nodeName属性
nodeName属性规定节点的名称。

nodeName 是只读的
元素节点的nodeName 等同于标签名
属性节点的nodeName 是属性名称
文本节点的nodeName 总是 #text
方根节点的nodeName 总是 #document

案例：

<h1 id="id01">我的第一张网页</h1>

    <p id="id02"></p>

    <script>
      //获取id为id01的标签名
      document.getElementById("id02").innerHTML = 
      document.getElementById("id01").nodeName;//H1
    </script>

注意：nodeName总是包含HTML元素的大写标签名。

nodeType属性
nodeType属性返回节点的类型，nodeType是只读的。

<h1 id="id01">我的第一张网页</h1>

    <p id="id02"></p>

    <script>
      //获取id为id01的标签名

      document.getElementById("id02").innerHTML = 
      document.getElementById("id01").nodeType;//1
    </script>

nodeType的属性：

JavaScript HTML DOM 元素（节点）

添加和删除节点(HTML元素)

如需向HTML DOM添加新元素，必须首先创建这个元素(元素节点)，然后将其追加到已有的元素。

例子：

<div id="div1">
        <p id="p1">这是一段文字。</p>
        <p id="p2">这是另一段文字。</p>
    </div>  

    <script>
        //创建了一个新的<p>元素
        var para = document.createElement("p");
        //如果要向<p>元素添加文本，就需要先创建文本节点，
        var node = document.createTextNode("这是个新文本！");
        //然后向<p>元素添加这个文本节点
        para.appendChild(node);

        //查找一个已有的元素
        var element = document.getElementById("div1");
        //向这个已有的元素追加新元素
        element.appendChild(para);
    </script>

创建新的HTML元素-insertBefore()

<div id="div1"> 
        <p id="p1"></p>这是一段文字！</p>
        <p id="p2">这是另一段文字。</p>
    </div>

    <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是最新的文本哦！");
        para.appendChild(node);

        var element = document.getElementById("div1");
        var child = document.getElementById("p1");
        element.insertBefore(para,child);
    </script>

删除已有HTML元素（removeChild）

如需删除某个HTML元素，需要知道该元素的父：
第一种：

<div id="div1">
        <p id="p1">这是第一段文字</p>
        <p id="p2">这是第二段文字</p>
    </div>

    <script>
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        parent.removeChild(child);
    </script>

第二种方式：

	<div id="div1">
        <p id="p1">这是第一段文字</p>
        <p id="p2">这是第二段文字</p>
    </div>

    <script>
        //拿到child
        var child = document.getElementById("p2");
        //通过child找到它的parent并且删除child
        child.parentNode.removeChild(child);
    </script>

方法 node.remove() 是在 DOM 4 规范中实现的。

替换HTML元素(replaceChild)

如需替换元素的，请使用 replaceChild() 方法：

<div id="div1">
        <p id="p1">这是一段文字。</p>
        <p id="p2">这是另一段文字。</p>
    </div>
    <script>
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");

        var para = document.createElement("p");
        var node = document.createTextNode("这是新的文本。小可爱！");
        //用新的文本替换了id为p1的文本
        parent.replaceChild(para,child);
    </script>

JavaScript HTML DOM 集合

HTMLCollectioin 对象

getElementsByTagName() 方法返回HTMLCollection对象。
HTMLCollection对象是类数组的HTML元素列表(集合)。
例如：选中文档中的所有p元素：

var x = document.getElementsByTagName("p");

该集合中的元素可通过索引号进行访问。
如果需要访问第二个p 元素，可以写：

y = x[1];


	<h1>JavaScript HTML DOM</h1>

    <p>Hello World!</p>

    <p>Hello Chinal!</p>

    <p id="demo"></p>
    <script>
        //将所有的p标签都放到myCollection集合
        var myCollection = document.getElementsByTagName("p");
        document.getElementById("demo").innerHTML = 
        "第二段的 innerHTML 是："+
        myCollection[1].innerHTML;
    </script>

HTML HTMLCollection长度

lenght 属性定义了HTMLCollection中元素的数量：

<h1>JavaScript HTML DOM</h1>

    <p>Hello World!</p>

    <p>Hello Chinal!</p>

    <p id="demo"></p>

    <p id="last"></p>
    <script>
        var myCollection = document.getElementsByTagName("p");
        document.getElementById("last").innerHTML = 
        "此文档包含 "+ myCollection.length + "段文字。";
    </script>

实例：改变所有p元素的背景色：

<h1>JavaScript HTML DOM</h1>

    <p>Hello World!</p>

    <p>单击按钮可更改所有P元素的颜色</p>

    <button onclick="myFunction()">试一试</button>

    <script>
        function myFunction() {
            var myCollection = document.getElementsByTagName("p");
            var i;
            for(i = 0; i< myCollection.length; i++){
                myCollection[i].style.color = "red";
            }
        }
    </script>

HTMLCollection并非数组！

HTMLCollection 也许看起来像数组，但并非数组。
能够遍历列表并通过数字引用元素(就像数组那样)。
不过，我们无法像作用数组那样，valueOf()、pop()、push()或者join()。

JavaScript HTML DOM 节点列表

HTML DOM NodeList对象
NOdeList对象与HTMLCollection对象几乎相同。
NodeList对象与HTMLCollection 对象几乎是相同的。
如果使用getElementsByClassName()方法，某些浏览器会返回NodeList对象而不是HTMcollection.
但是所有的浏览器都会为childNode属性返回NodeList对象。
大多数浏览器会为querySelectorAll() 方法返回 NodeList对象。
例子：选中文档中的所有p节点：

	<h1>JavaScript HTML DOM</h1>

    <p>Hello World!</p>

    <p>Hello China!</p>

    <button onclick="myFunction()">点击一下！</button>
    <p id="demo"></p>
    <p id="demo2"></p>
    <script>
        function myFunction() {
            var myNodeList = document.querySelectorAll("p");
        document.getElementById("demo").innerHTML = 
        "第一段的 innerHTML 是："+
        myNodeList[0].innerHTML;

            var myNodeList2 = document.querySelectorAll("p");
        document.getElementById("demo2").innerHTML = 
        "第二段的 innerHTML 是："+
        myNodeList2[1].innerHTML;
        }
    </script>

HTML DOM NOdeList长度：

length属性定义节点列表中的节点数：

	<h1>JavaScript HTML DOM</h1>

    <p>Hello World!</p>

    <p>Hello China!</p>

    <p>Hello China!</p>
    
    <p>Hello China!</p>

    <p id="demo"></p>

    <script>
        var myNodeList = document.querySelectorAll("p");
        document.getElementById("demo").innerHTML = 
        "此文档包含"+myNodeList.length  + " 段文字!";
    </script>

改变节点列表中所有p元素的背景色：

<h1>JavaScript HTML DOM</h1>

    <p>Hello World!</p>

    <p>Hello China!</p>

    <p>Hello China!</p>

    <p>Hello China!</p>

    <button onclick="myFunction()">试一试</button>

    <script>
        function myFunction() {
            var myNodeList = document.querySelectorAll("p");
            var i;
            for(i = 0; i< myNodeList.length; i++){
                myNodeList[i].style.color = "pink";
            }
        }
    </script>

JavaScript学习笔记（DOM 导航、节点、集合、节点列表）