操作节点 表格节点 表单节点

1.获取节点

1、获取首节点

• 标准浏览器 父元素.firstElementChild

• IE浏览器 父元素.firstChild

2、获取尾结点

• 标准浏览器 父元素.lastElementChild

• IE浏览器 父元素.lastChild

3、获取上一个兄弟节点

• 标准浏览器 参考节点.previousElementSibling

• IE浏览器 参考节点.previousSibling

4、获取下一个兄弟节点

• 标准浏览器 参考节点.nextElementSibling

• IE浏览器 参考节点.nextSibling

2.删除节点

1、参考节点.remove()

• 删除当前节点 ==存在兼容问题==

2、父元素.removeChild(子节点)

• 删除父元素下的子节点

3.插入节点

    父元素.insertBefore(插入的新节点,参考位置)

4.替换复制节点

1、替换节点

     父元素.replaceChild(新节点，要替换的旧节点)

2、复制(克隆)节点

     参考节点.cloneNode(Boolean值)  true复制节点和节点内容   false只复制节点(默认值)

5.DOM方法操作属性节点

• 获取 节点.getAttribute(属性名)

• 设置 节点.setAttribute(属性名,属性值)

• 删除 节点.removeAttribute(属性名)

6.操作表格节点

• 以下方法是快速获取表格中的节点

  • table.thead 获取thead表头

  • table.tBodies 获取tbody主体 获取到的是一个集合

  • table.tFoot 获取tfoot表尾

  • table.row 获取table中的所有行

  • tables.rows[下标].cells 获取table中该行所对应的列

7.操作表单节点

1、获取表单节点

• form.name值 获取到对应的表单元素

• ==注意==：如果name的值相同 则是获取到一个集合

2、表单中的事件

2.1input标签事件

• input.onfocus 输入框获取焦点

• input.onblur 输入框获取焦点

• input.onchange 当输入框内容发生改变的时候触发,失去焦点的时候才会进行触发,只要本次值和上次值内容不一样才会触发

• input.oninput 当输入框内容发生改变的时候触发 实时触发该事件

• input.onselect 当选中输入框中的内容的时候触发

2.2form标签事件

• form.onsubmit 点击提交按钮触发

  • input标签的type类型为submit 或者button按钮 才可以触发该事件

• form.onreset 点击重置按钮触发

  • input标签的type类型为reset 才可以触发该事件

==如何阻止表单提交==

• action属性设置为Javascript:void(0)

• 在form标签事件中加 return false

3、表单中的方法

• input.focus(); 输入框获取焦点方法

• input.blur(); 输入框失去焦点方法

• input.select(); 选中输入框的元素

• form.submit() 提交表单

• form.reset() 重置表单