DOM操作

常用示例：

document.querySelector()            //选取一个节点
document.querySelectorAll()         //选取多个节点
document.getElementByTagName()      //选取html标签，可用于选取子代
document.createElement()            //创建节点
<br>document.createDocumentFragment()
ele.appendChild()                   //添加节点到某一元素里
ele.insertBefore(ele,newEle)        //添加节点到某一节点前面
<br>ele.innerHTML=''
<br>ele.innerText=''<br>ele.getBoundingClientRect().top     //获取元素在可视窗口的顶部距离

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 重置表单

最后给大家分享一些java面试资料，有需要可以戳我免费领取!