DOM

DOM

DOM Document Object Model 文档对象模型。
DOM 本质就是开发人员通过js操作页面。
DOM 在网页被加载过程中浏览器会把页面元素描绘成一个由节点组成的倒立的DOM树。
DOM 最初的互联网是基于HTML静态页面的，在不同的浏览器（Internet Explorer4.0和Netscape Navigator4.0）支持不同形式的页面的动态调用（DHTML），造成开发人员无法只编写一个页面用于多个浏览器。为促进浏览器之间的兼容，W3C规划推出了相关的DOM标准。

DOM操作

document对象：

属性：

body	body元素节点
title	标题
URL	路径
links	超链接
forms	form表单
images	页面中的所有图片节点

 方法：

getElementById()	根据id找元素(有返回值返回节点对象)

实例：
<div id="box"></div>

<script>
var oDiv=document.getElementById("box");
console.(oDiv);//输出的是找到id名为box的div
</script>

常见节点对象的属性：

childNodes	孩子节点(文本节点和元素节点) 直接后代
children	直接后代中的元素节点
firstChild	第一个孩子
lastChild	最后一个孩子
parentNode	父节点
nextSibling	下一个兄弟
previousSibling	上一个兄弟
innerHTML:	元素节点的内容

childNodes   和   children 特殊点
 <div id="box"> 
 <p>1</p> 
 <p>2</p>
 <p>3</p>
 <p>4</p> 
 <p>5</p>
 </div>
 <script>
 var oDiv=document.getElementById("box");
 var a= oDiv.childNodes;
 console.log(a);//输出结果是oDiv的所有孩子节点(包括文本节点和元素节点)
 var b= oDiv.children;
 console.log(b); //输出结果是oDiv的直接孩子节点(直取元素节点)

DOM 节点操作：

增：

createElement()	创建元素节点
createTextNode()	创建文本节点
appendChild()	追加孩子

删：

removeChild()	移除节点

 改：
 属性操作：

属性值的设置	属性值的获取
对象.属性名=值;	对象.属性名
对象[属性]=值;	对象[属性名]
对象.setAttribute(attr,value)	getAttribute(属性名)

总结：
掌握了DOM的方法和属性就可以更好的通过js操作页面。