千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip

  认识 DOM

                => Document Object Model 文档对象模型

                => 就是js给我们提供的用来操作页面的一套属性和方法

                => DOM树

                    -> 是一个抽象的概念

                    -> 都我们的页面上的标签的一个抽象画

                    -> 抽象成一颗树

                    -> 最大的标签 : html

            获取到我们要操作的元素

                => 首先要获取到

                => 之后在进行操作

            操作DOM

 DOM节点

                => 节点:就是组成页面的每一个部分(html 文本 属性 ....注释)

                => 节点的分类

                    -> 元素节点

                        + 就是页面上的每一个标签

                    -> 文本节点(空格和换行)

                        + 页面上的每一段文本

                        + 注意: 空格和换行属于文本节点

                    -> 注释节点(空格和换行)

                        + 页面上的每一段注释

                        + 注意: 空格和换行属于注释节点

                    -> 属性节点

                        + 页面中的每一个属性

                        + 注意:

                            - 属性节点不会独立出现

                            - 就是用来描述标签的

                            - 不会和任意节点产生父子级关系

                => 根节点: document

                => 根元素节点: html

获取节点

                => 非常规标签

                    -> html: document.documentElement

                    -> head: document.head

                    -> body: document.body

                => 常规标签

                    -> id: document.getElementById()

                    -> className: document.getElementsByClassName()

                    -> 标签名: document.getElementsByTagName()

                    -> name属性: document.getElementsByName()

                    -> 选择器: document.querySelector()

                    -> 选择器: document.querySelectorAll()

            节点的获取

                => 我们获取到的包含但是不限于元素节点

            常用的方法

                => childNodes

                    -> 语法: 元素.childNodes

                    -> 返回值:

                        + 是一个伪数组

                        + 里面包含所有的 子节点

                => children

                    -> 语法: 元素.children

                    -> 返回值:

                        + 依旧是一个伪数组

                        + 里面包含的是所有的 子元素节点

                => firstChild

                    -> 语法: 元素.firstChild

                    -> 返回值:

                        + 第一个子节点

                => firstElementChild

                    -> 语法: 元素.firstElementChild

                    -> 返回值:

                        + 第一个子元素节点

                => lastChild

                    -> 语法: 元素.lastChild

                    -> 返回值:

                        + 最后一个子节点

                => lastElementChild

                    -> 语法: 元素.lastElementChild

                    -> 返回值:

                        + 最后一个子元素节点

                => previousSibling

                    -> 语法: 元素.previousSibling

                    -> 返回值:

                        + 上一个兄弟节点

                => previousElementSibling

                    -> 语法: 元素.previousElementSibling

                    -> 返回值:

                        + 上一个兄弟元素节点

                => nextSibling

                    -> 语法: 元素.nextSibling

                    -> 返回值:

                        + 下一个兄弟节点

                => nextElementSibling

                    -> 语法: 元素.nextElementSibling

                    -> 返回值:

                        + 下一个兄弟元素节点

                => parentNode

                    -> 语法: 元素.parentNode

                    -> 返回值: 父节点

                => parentElement

                    -> 语法: 元素.parentElement

                    -> 返回值: 父元素节点

                => attributes

                    -> 语法: 元素.attributes

                    -> 返回值: 标签上的所有的属性