DOM

Posted 2020-08-25 llc-Mite

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.onchange=function(){}
//当表单值发生改变时
//text当光标离开时值发生改变时发生的事
//radio：标准下点击时候只要值变了，就会发生事件，非标准下焦点离开的时候如果值变了就会触发
//
当类型为选项是radio，把两个input的name改成一样，那么就可以变成单选了，获取值的是一个集合，name[0]这样
表单事件onsubmit onreset
onsubmit 当提交表单的时候触发
onreset 重置表单