一.定义
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>点击前：
点击”插入节点"：
点击“替换节点”：
点击“删除节点”：