DOM

1、梳理知识点

window对象：  location....

window对象方法 ：   

    定时器 ： 

document对象 ： 

    document.getElementsByTagName()  集合  

    document.querySelector("#box")   .box  div

    document.body   document.documentElement

操作页面元素 ：

    操作样式 

        className = "类名"

    操作属性

        

    操作内容

        innerHTML    /  innerText

        value

 

location : 页面跳转  location.href                 

 

2、dom   document  object  model  (DOM 文档对象模型)

html是dom结构的根节点

html元素是    元素节点

元素的属性叫做 属性节点

元素的内容叫做 文本节点

一切都是节点

 

 

节点关系 （了解）： 

parentNode  父节点

children    孩子节点

childNodes 孩子节点  childNodes 会将换行识别成文本节点  

firstElementChild  第一个孩子节点   

lastElementChild  最后一个孩子节点

nextElementSibling   下一个兄弟节点

previousElementSibling  前一个兄弟节点

 

 

节点类型 ： nodeType

只有三种情况

元素节点  1

文本节点  3

属性节点  2

 

tagName 或 nodeName 获取查找到的元素的标签名

 

3、节点的动态操作（重点）  创建  添加  删除

 1、动态创建节点

document.createElement("标签名")

document.createTextNode()  创建文本节点  （了解）

 

2、动态添加节点

    appendChild()    用法 ：  父元素.appendChild( 要添加的子元素 )

        一定是父子关系,且默认往后追加

 

    insertBefore()  用法 ： 父元素.insertBefore( 要添加的子元素 , 参照节点 )  

        将要添加的子元素 添加 到参照节点的前面,如果参照节点是null  则和appendChild效果相同

 

3、删除 

    removeChild()   

        父元素.removeChild( 要删除的子元素 )

    remove()

        要删除的元素.remove()

 

4、节点克隆

cloneNode( true )   

        没有参数，表示只克隆元素本身   如果参数为true，即克隆元素本身，又克隆元素的内容 

 

5、节点属性的操作

getAttribute() 获取元素的属性值  （包含自定义属性）

setAttribute() 设置元素的属性 （为某个元素添加新的属性）  （了解）