JavaScriptDOM节点操作

一、定义

DOM ：文档对象模型

DMO是针对HTML文档的一个API（应用程序编程接口），DOM描绘了一个层次化的节点树，允许开发人员添加，删除，修改页面的某一部分。

节点分为几种不同的类型：

Node类型

Document类型

Element类型

Text类型——文本类型

Comment类型 —— 注释类型

二、类型的具体说明

Node类型

属性：

1、nodeType ，表示节点类型

规则： 1 –>Element类型 3 –>Text类型 8 –>Comment类型 9 –>Document类型

2、 childNodes ，表示子节点集合，可以使用slice方法将NodeList转换为数组

var arr = Array.prototype.slice.call(nodes,0);

demo:

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
	window.onload = function(){
	    console.log(document.body.childNodes);   //获取所有子节点，包括各种类型的节点，返回NodeList类数组对象
    //将类数组对象转换为数组对象
    var tempArr = Array.prototype.slice.call(document.body.childNodes,0);
    console.log(tempArr);
 
        //Text类型
    var texts = tempArr.filter(function(item,index){
	return item.nodeType == 3;
    });
    console.log(texts);
 
    //Element类型
    var eles = tempArr.filter(function(item,index){
	    return item.nodeType == 1;
    });
    console.log(eles);
    //Comment类型
    var com = tempArr.filter(function(item,index){
	return item.nodeType == 8;
    });
    console.log(com);
    //Document类型
    var docu = tempArr.filter(function(item,index){
	    return item.nodeType == 9;
    });
    console.log(docu);
 
    }
</script>
</head>
<body>
    hello
    <!-- 注释 -->
    <div>
	<span>world</span>
    </div>
    你好
</body>

输出结果：

3、nodeName , 取决于节点类型，如果是元素类型，值为元素的标签名

4、nodeValue , 取决于节点类型，如果是元素类型，值为null

5、parentNode，指向文档树中的父节点

6、previousSibling，兄弟节点的前一个节点

7、nextSibling，兄弟节点的下一个节点

8、firstSibling，childsNode列表中的第一个节点

9、ownerDocument，指向表示整个文档的文档节点

10、hasChildNodes，包含一个或多个节点时，返回true

	<head>
    <meta charset="UTF-8">
    <title>Node属性</title>
        <script>
	    window.onload = function(){
		console.log(document.body.childNodes);  //获取所有节点
	var childs = document.body.childNodes;
	console.log(childs.length);
 
	console.log(childs[3].nodeName);     //获取类数组对象中第三个节点的nodeName
	// 或者console.log(childs.item(0));
 
	console.log(childs[1].nodeValue);   //获取第一个节点的nodeValue
 
	console.log(childs[0].parentNode);   //指向文档树中的父节点
 
	//兄弟节点
	console.log(childs[0].nextSibling);     //下一个兄弟
	console.log(childs[4].previousSibling); //上一个兄弟
 
	console.log(document.body.firstChild == childs[0]);  //第一个孩子节点
 
	console.log(childs[0].ownerDocument);   //任何节点都属于它所在的文档
 
	console.log(document.body.hasChildNodes());  //在包含一个或多个节点的情况下返回true
	console.log(childs[0].hasChildNodes());
		
 }
</script>
</head>
<body>                  
    <!-- 注释 -->
    hello
    <div>
	<span>world</span>
    </div>
    你好
    <div>
	one
    </div>
</body>

输出结果：

Node类型的操作节点

appendChild（）—— 向childNodes列表末尾添加一个节点

	<head>
    <meta charset="UTF-8">
    <title>node节点操作</title>
        <style>
	    .content{
		border:1px solid black;
		overflow: hidden;
	    }
	    .content > div{
		width:50px;
		height: 50px;
		background-color: red;
		float: left;
		margin: 10px;
	    }
	    .content .two{
		background-color: blue;
	    }
	</style>
	<script>
	    window.onload = function(){
		var div = document.getElementsByClassName('one')[0]; //通过classname来获取元素
		console.log(div);
	//复制
	var newDiv = div.cloneNode(true);
 
	var btns = document.getElementsByTagName('button');  //选中所有button元素
	console.log(btns);
            
            //添加点击效果
	btns[0].onclick = function(){
	        //追加节点
	        var content = document.getElementsByClassName('content')[0];
	        content.appendChild(newDiv);
	    }
	}
</script>
</head>
<body>
    <button>点击追加</button>
    <div class="content">
	    <div class="one">
		<span>one</span>
	    </div>
	    <div class="two">
		two
	    </div>
    </div>
</body>

输出结果：

点击前：

点击后：

insertBefore（）——第一个参数：要插入的节点，第二个参数：作为参照的节点
replaceChild（）——第一个参数：要插入的节点，第二个参数：要替换的节点
removeChild（）——一个参数，即要删除的节点
cloneNode（）——复制节点

    <head>
    <meta charset="UTF-8">
    <title>node</title>
    <style>
        .content{
	    border:1px solid black;
	    overflow: hidden;
	  }
	.content > div{
	    width:50px;
	    height: 50px;
	    background-color: red;
	    float: left;
	    margin: 10px;
	  }
	 .content .two{
	    background-color: blue;
	  }
	 .content .three{
	    background-color: pink;
	  }
    </style>
    <script>
	    window.onload = function(){
	    var btns = document.getElementsByTagName('button');
	    console.log(btns);
    var content = document.getElementsByClassName('content')[0];  
 
    var newDiv = document.getElementsByClassName('one')[0];
    //克隆one，要插入的节点
    newDiv = newDiv.cloneNode(true);
    //粉色div，参考的节点
    var div3 = document.getElementsByClassName('three')[0];
 
    //插入节点
    btns[0].onclick = function(){
	    content.insertBefore(newDiv,div3);
	}
 
    //替换节点
    btns[1].onclick = function(){
	    content.replaceChild(newDiv,div3);
    }
 
    //移除节点
    btns[2].onclick = function(){
	    content.removeChild(div3);
        }
    }
</script>
</head>
<body>
	<button>插入节点</button>
	<button>替换节点</button>
	<button>删除节点</button>

	<div class="content">
		<div class="one">one</div>
		<div class="two">two</div>
		<div class="three">three</div>
	</div>

</body>