DOM：Document Object Model 文档对象模型

文档：html页面

文档对象：页面中的元素

文档对象模型：定义为了能够让程序（js）去操作页面中的元素

DOM会把文档看作是一棵树document > html > html(标签),同时定义了很多方法来操作这棵树中的每一个元素；

DOM节点：

操作子节点和兄弟节点：

childNodes（不推荐使用）是一个属性，属性是不需要加括号，用某个对象来调用，它是一个子节点列表集合。只包含一级子节点，不包含孙级节点

标准下元素节点包含文本节点，也包含非法嵌套标签

在非标准下不包含文本，不会包含非法嵌套标签

dom节点的类型有很多种 12种

nodeType

1、元素节点    2、属性节点   3、文本节点

nodeType:只读属性 当前元素的节点类型

attributes:只读属性 属性列表集合

children 是一个可读属性，返回一个子节点的列表

标准下：只包含元素类型

非标准下：只包含元素类型

firstChild 第一个子节点

标准下：会包含文本节点

非标准下：不包含文本节点

firstElementChild 第一个元素子节点

lastChild与firstChild一样

nextSibling 下一个元素节点

previousSibling 上一个元素节点

父节点操作

parentNode       当前节点的父级节点 没有什么兼容问题可以使用

offsetParent 与parentNode的区别 离当前元素有定位属性的的父节点，如果没有定位父级，默认是body

ie7以下，默认是html，如果某个元素出发了layout，那么offsetParent的父节点会指向触发layout的元素节点；

位置属性

offsetLeft/Top 只读属性 当前元素到定位父级的距离（偏移值）

style.width //样式宽

clientWidth //样式宽+padding 可视区宽度

offsetWidth //样式宽+padding+border 占位宽

元素的动态创建

document.creatElement("");//创建元素

父级.appendChild(); 追加元素

父级.insertBefore(新的元素,被插入的元素);//在指定元素前面插入元素

在ie下如果第二个参数节点不存在，会报错，在其他标准浏览器下如果第二个参数的节点不存在，会以appendChild的形式进行添加

父级.removeChild();     移除节点元素     //有坑，这里批量删除的时候倒序删便可解决这个问题

父级.replaceChild(新节点，被替换的节点);

 

操作表格

tHead :表格头

tBodies :表格正文

tFoot :表格尾

rows :行

cells:列

table.tBodies[0]                              //获取第一个tbody节点 类似于getElementsByTagName获取的是一个元素节点的组合

table.tBodies[0].rows[0]                 //获取表格正文部分的第一行的tr节点

table.tBodies[0].rows[0].cells[0]     //获取表格第一行第一列的单元格节点td节点

操作表单

//name

在表单中name比id更重要

通过form1表单点上name值就可以获取该元素了

form1.text1.οnchange=function(){}

//当表单值发生改变时

//text当光标离开时值发生改变时发生的事

//radio：标准下点击时候只要值变了，就会发生事件，非标准下焦点离开的时候如果值变了就会触发

//

当类型为选项是radio，把两个input的name改成一样，那么就可以变成单选了，获取值的是一个集合，name[0]这样

表单事件onsubmit onreset

onsubmit 当提交表单的时候触发

onreset 重置表单

常用示例：

document.querySelector()            //选取一个节点document.querySelectorAll()         //选取多个节点document.getElementByTagName()      //选取html标签，可用于选取子代document.createElement()            //创建节点ele.appendChild()                   //添加节点到某一元素里ele.insertBefore(ele,newEle)        //添加节点到某一节点前面 ele.innerHTML=''          ele.innerText=''

 

以上是比较常用的dom操作