JavaScript 节点（node）知识

一、节点概念

DOM : Document Object Model 文档对象模型

• 定义了访问和处理HTML文档的标准方法
• 根据DOM，文档中每一个成分都是一个节点
• DOM节点
• 整个文档是一个文档节点
• HTML标签是元素节点 包含在元素中的文本，叫文本节点 属性，属性节点 注释，注释节点

节点级别：

• 在节点树中，顶端对应的节点为根节点

• 根节点以外的每一个节点都有一个父节点

• 节点可以有任何数量的子节点

• 叶子节点：没有子节点的节点是叶子节点

• 同级节点拥有相同的父节点

二、节点的属性

• childNodes 返回节点的子节点列表

例子：

<style>
	#box div{height:40px;width:40px;background:#099;float:left;margin-left:10px;}
</style>
<script>
	function f(){
		var box = document.getElementById('box');
		var child = box.childNodes;
		alert(child.length);
	}
</script>
<div id = "box">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
<button onclick="f()">按钮</button>

运行结果

结果长度为11，因为在代码中id为box的div到下面的div之间有空格，所以也占了1个长度，所以总共长度是11.

• fristChild 返回节点的首个子节点

例子

	<style>
 		#box div{height:50px;width: 50px;float: left;margin-left:10px; }
        #box .div1{background: yellow;}
        #box .div2{background: purple;}
        #box .div3{background: brown;}
        #box .div4{background: paleturquoise;}
	</style>
    <script>
        function f() {
            var box = document.getElementById("box");
            var frist = box.firstChild;
            frist.style.background="purple";
        }
    </script>
    <div id="box"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="div4">4</div></div>
    <button onclick="f()">Frist</button>

运行结果

• lastChild 返回节点的最后一个子节点

例子

css样式是一样的，这里就不写了，就写一下js代码

 <script>
        function f() {
            var box = document.getElementById("box");
            var last = box.lastChild;
            last.style.background="purple";
        }
    </script>

    <div id="box"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="div4">4</div></div>
    <button onclick="f()">Last</button>

运行结果

• nextSibling 返回节点之后紧跟着的同级节点

例子

	<script>
        function f() {
            var box = document.getElementById("box");
            var next = box.firstChild.nextSibling;
            next.style.background="pink";
        }
    </script>
    <div id="box"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="div4">4</div></div>
    <button onclick="f()">Next</button>

运行结果

• previousSibling 返回节点之前紧跟着的同级节点

例子

	<script>
        function f() {
            var box = document.getElementById("box");
            var previous = box.lastChild.previousSibling;
            previous.style.background="pink";
        }
    </script>
    <div id="box"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="div4">4</div></div>
    <button onclick="f()">Previous</button>

运行结果

• parentNode 返回节点的父级节点

例子

这里css样式只多加了一句，其他的同上。

	body{height: 200px;background: #2b542c;}
 	<script>
        function f() {
            var box = document.getElementById("box");
            var parent = box.parentNode;
            parent.style.background="pink";
        }
    </script>
     <div id="box"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="div4">4</div></div>
    <button onclick="f()">Parent</button>

运行截图

• textContent 返回节点及其后代节点的文本内容

例子

	<script>
        function f() {
            var box = document.getElementById("box");
            var text = box.textContent;
            alert(text);
        }
    </script>
    <div id="box">
        div里面的内容
        <p>p标签的内容</p>
    </div>
    <button onclick="f()">Text</button>

运行结果