JS

DOM

DOM赋予了操作页面的能力

可以通过DOM,创建元素,插入,修改,删除页面中的内容

html中的内容被被js解析成为DOM树

html中所有内容都是节点

ttml文档->文档节点

元素|标签->元素节点

属性    ->属性节点

标签对中的文本 ->文本节点

获取元素节点的方式:

1.document.getElementById("id属性值")

获取到页面中某一个元素节点

2.主语.getElementsByClassName("Class属性值")

通过元素Class属性值获取到一个或多个元素节点

主语:document|元素节点

3.主语.getElementsByTagName("标签名")

通过元素的标签名获取到一个或者一组元素

主语:document|元素节点

4.document.getElementsByName("name属性值")

通过Name属性值获取一组元素

一般在表单元素身上会有name属性,name属性的作用为后台区分前台元素的唯一,如果没有name,标签元素没有提交数据的能力

创建节点

document.createElement("元素名"); 创建元素节点

document.createTextNode("文本") 创建文本节点

插入节点

父节点.appendChild(子节点)

子节点追加到父节点中的最后位置

父节点.insertBefore(节点1,节点2)

节点1: 新节点

节点2: 参照节点

返回插入的节点

必须有2个参数

第二个参数null,undefined都相当于追加,作用与appendChild相同

间接查询节点

childNodes 返回元素的一个子节点的数组

firstChild 返回元素的第一个子节点

lastChild 返回元素的最后一个子节点

nextSibling 返回元素的下一个兄弟节点

parentNode 返回元素的父节点

previousSibling 返回元素的上一个兄弟节点

获取元素节点标签对中的内容--节点.innerHTML

获取表单元素显示的值    表单元素.value

移出子节点

父节点.removeChild(子节点)

替换节点

父节点.replaceChild(节点1,节点2)

节点1:是新节点

节点2:老节点

返回值被替换额节点

如果新节点为父节点中已有节点,效果为老节点删除,被替换成为新节点

clone节点

节点.cloneNode(boolean) 克隆节点

true  当前节点包含其字内容全部克隆

false  只克隆当前节点,属性+属性值会克隆,id值也会相同需要修改

html属性,css样式+js功能如果定义在标签上标签上的内容都会被克隆,但是js中的css中单独的语法,不会被克隆