DOM基础，classList属性提供的方法和属性，DOM中节点的操作，追加节点

1. 什么是DOM:

      Document  Object Modei :文档对象模型

 2.DOM核心：document对象

 3.DOM作用：

                可以访问和操作xtml和HTML文档中的标签，标签的属性，节点的属性和方法

                 xtml:自己定义标签<studentName></studentName>

 4.在DOM中将整个HTML文档看作一颗倒立的树(树状结构):一个HTML页面就是一个DOM对象，是一颗DOM HTML树

            (1)DOM HTML数的根节点：HTML(根标签，只有一个)

            (2)元素(Element)：HTML文档中的标签

            (3)节点(node):文档中的内容

       

        5.DOM树：浏览器的JavaScript引擎(谷歌的v8引擎)在解析页面时，采用树形结构来存放页面元素

          DOM树中的节点的分类：

            (1)标签节点：所有标签

            (2)属性节点：标签的属性---内置属性，自定义属性

            (3)文本节点：标签中的文本,换行符，空格等

            (4)注释节点：<!--注释内容-->

           

        6.节点的基本概念

            (1)根节点：根节点是HTML，有且只有一个

            (2)子节点：某个节点的下一级节点

            (3)父节点：某个节点的上一级节点

            (4)兄弟节点：拥有相同父节点的节点

通过document对象来操作HTML页面中的元素

        1.getElenentByid('id属性值'):

                通过标签的ID属性获取标签

        2.getElenentsByName('name属性值')：

                通过标签的name属性获取标签，返回值是NodeList(伪数组）

        3.getElenentByTagName('标签名')：

                通过标签名来获取标签，返回值的类型是HTMLCollcetion

        4.getElenentsByClassName('class属性值')：

                通过标签的class属性获取标签，返回值的类型是HTMLCollcetion

        5.  querySelector('#id值'):

                返回一个指定id属性值的标签

             querySelector('.class属性值')：

                返回第一个指定class属性的标签

             querySelector('标签名')：返回第一个指定标签名的标签

        6.querySelectorAll('.class属性值')：

                返回所有指定class属性值的标签，返回值类型NodeList

          querySelectorAll('标签名')：

                返回所有指定标签名的标签，返回值类型NodeList

获取操作的元素

    document对象的属性

        1.document.body：

                返回对象的body元素，所有元素（标签）都可以得到

        2.document.documentElement:

                返回文档的HTML元素，包含head和body里面的标签

        3.document.forms:

                返回文档的form(表单)对象(是一个集合，length为form表单的数量)，只有一个表单时长度为1

 

 

 

Element对象的属性和方法:

        在JavaScript代码中HTML的标签（Element）的属性和方法

        (1)children:

                用来获取某个元素的子元素

      强调：HTMLCollcetion和NodeList区别

        (1)HTMLCollcetion:通过document对象或Element对象调用

      （2)NodeList对象：document对象调用调用getElementByName()方法在Chrome和FireFox浏览器返回的是NodeList对象。IE11返回的是HTMLCollcetion

        (2)HTMLCollcetion对象用于元素操作

        (3)Element对象用于节点操作

 

  元素的属性和方法

        (1)属性：

          1.innerHTML:设置返回起始标签和结束标签之间的HTML（包括标签）

          2.innerText:设置返回起始标签和结束标签之间的文本（不能解析标签---不识别标签）

          3.textContent:设置或返回指定节点的内容(不识别console.log自带的换行)

        (2)方法

            1.document.write('html内容')：在文档中写入指定的内容

            2.document.writeln('html内容')：在文档中写入指定的内容之间加一个空格

    标签的属性

        1.attributes:返回标签的所有属性集合

        2.setAttributes(name,value):设置标签的属性值。参数name表示属性名，参数value表示属性值

        3.getAttribute(name)：获取标签的某个属性值

        4.removeAttribute(name):删除标签的某个属性

 

  --元素的样式

        用法： 

           (1) 元素名.style.样式属性名 ='属性值'

              注意:'样式属性名'在使用时需要将单词之间的'-'删除，第二个单词首字母大写

           (2)html5对象样式的操作

               1.一个元素的class属性可以有多个值:在保留原有样式的基础上添加新的样式

               2.如何在js的程序运行中动态的添加class属性值：

                classList属性(只读)：是元素的类属性(class)的列表

 

 

练习： 点击标签，标签下面出现相应的数字

 

 

 

 

            (3).classList属性提供的方法和属性

                1.属性：length--某个标签的class属性值得个数

                2.方法：

                    a.add('字符串')：给元素添加类名。一次只能添加一个

                    b.remove('字符串')：将元素的类名删除。一次只能删除一个

                    c.toggle('字符串')：若类名存在则删除。不存在则添加

                    d.item(index):根据index来获取元素的类名

                    e.contains('类名'):判断元素是否含有给定的类名，若有返回true，没有返回false

 

DOM节点的操作：采用操作节点的方式来操作页面元素

        (1)获取节点时使用的属性：

            a.firstChild:获取当前节点的首个子节点

      注意：换行符，空格等也是节点

            b.nextSibling:返回同一层级中指定节点之后紧跟的节点

            c.lastChild:获取当前节点的最后一个子节点

            d.preniousSibling：返回同一层级中指定节点之前紧跟的节点

            e.nodeName:节点的名称（标签的名称）

            f.nodeValue:节点的值

            g.nodeType：节点类型

                1:表示当前节点的类型是标签

                2.表示属性节点

                3:表示是文本节点

                 getAttribute('id属性值')

                 getAttributeNode('id属性').nodeType

 

            h.parentNode:当前节点的父节点

            i.childNodes:当前节点的所有子节点

            强调：childNodes与children的区别:

                相同点:都可以获取子元素

                不同点：

                    childNodes属性用于节点操作，不仅包含文本节点，也包含其他的元素节点，返回值类型是NodeList

                    children属性用于元素操作,返回的元素节点(标签)，返回值类型是HTMLcollection

               

    追加节点:

            (1)创建元素节点:

                document.createElement()

            (2)在指定节点的末尾追加节点

                appendChild(newNode)

 

 

            (3)在指定节点之前添加一个节点

                insertBefore(newNode,node):将节点newNode插入到节点node之前(找node的父节点)

              该方法需要插入节点(node)父节点的调用

            (4)创建文本节点：

                document.createTextNode()