Javascript学习资料整理——week3-day1

一、

1.事件绑定

2.操作元素css样式

    获取操作元素

    style   (行内样式)

        语法：

            标签元素.style.样式名 = 样式值

            标签元素.style. = {'width':'200px','height':'200px'}

        专门用来给元素添加样式的

        添加的都是行内样式

        示例：           

 <div></div>

            <script>

                var div = document.querySelector('div')

                div.style.width = '100px'

                div.style.height = '100px'

                div.style.backgroundColor = 'pink'

                console.log(div)

                //<div style='width:100px;height:100px;background-color:pink'></div>

            </script>

    className class类样式

        专门用来操作元素类名的           

 <div class='box'></div>

            <script>

                var div = document.querySelector('div')

                console.log(div.className)  //box

            </script>

        也可以设置元素的类名，不过是全覆盖式的操作           

 <div class='box'></div>

            <script>

                var div = document.querySelector('div')

                div.className = 'test'

                console.log(div)    //<div class='test'></div>

            </script>

            在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖

    classList 动态添加移除class类样式

            添加样式

                div.classList.add('active')

            移除指定样式

                div.classList.remove('active')

3.操作元素属性

    getAttribute('属性名')

        获取元素的某个属性（包括自定义属性）           

 <div a='100' class='box'></div>

            <script>

                var div = document.querySelector('div')

                console.log(div.getAttribute('a'))  //100

                console.log(div.getAttribute('class'))  //box

            </script>

    setAttribute('属性名','属性值')

        给元素设置一个属性（包括自定义属性）           

 <div></div>

            <script>

                var div = document.querySelector('div')

                div.setAttribute('a',100)

                div.setAttribute('class','box')

                console.log(div)    //<div a='100' class='box'></div>

            </script>

    removeAttribute('属性名')

        直接移除元素的某个属性           

 <div a='100' class='box'></div>

             <script>

                var div = document.querySelector('div')

                div.removeAttribute('class')

                console.log(div)    //<div a='100'></div>

             </script>

二、

1.DOM节点

    从文档对象模型DOM角度看:

        每个html标签、标签属性、内容、注释...都被看成dom节点

        DOM 就是我们 html 结构中一个一个的节点构成的

2.dom节点分类

    dom节点类型：

        1.整个文档是一个文档节点

        2.每个 HTML 元素是元素节点

        3.HTML 元素内的文本是文本节点

        4.每个 HTML 属性是属性节点  

        5.注释是注释节点

   

    常用的三大类:  元素节点 / 文本节点 / 属性节点

        元素节点：

            通过 getElementBy...获取到的都是元素节点

        属性节点：

            通过 getAttribute 获取的就是元素的属性节点

        文本节点：

            通过 innerText 获取的就是元素的文本节点

3.DOM节点树形结构

4.DOM节点关系

    根节点：在HTML文档中，html就是根节点。

    父节点：一个节点之上的节点就是该节点的父节点，例如ul的父节点就是body，body的父节点就是html。

    子节点：一个节点之下的节点就是该节点的子节点，例如ul就是body的子节点。

    兄弟节点：如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。

             例如所有li是兄弟节点，因为他们拥有相同的父节点ul

5.获取节点

    获取元素节点：

        getElement系列

        querySelector系列

6.层次关系获取节点

    parentNode: 返回节点的父节点

    childNodes：返回子节点集合，childNodes[i]

    firstChild: 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

    lastChild：返回节点的最后一个子节点

    nextSibling: 下一个节点

    previousSibling：上一个节点

    children：获取某一节点下所有的子一级元素节点

        示例：         

 <div><p>hello</p></div>

           <script>

                var oDiv = document.querySelector('div')('div')    //这个oDiv获取的是页面中的            
                                                                    div元素，就是一个元素节点

                console.log(oDiv.children)

           </script>

           我们发现只有一个节点，因为 children 只要元素节点

           div下面又只有一个元素节点，就是p

           所以就只有一个，虽然只有一个，但是也是一个伪数组

7.层次关系获取元素节点

    firstElementChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

        示例：           

 <div><p>hello</p></div>

            <script>

                var oDiv = document.querySelector('div')    //这个oDiv获取的是页面中的div元素，就是一个元素节点

                console.log(oDiv.firstElementChild)     //<p>hello</p>

            </script>

            只获取一个节点，不再是伪数组

            获取的是第一个元素节点

            第一个元素节点就是p标签，是一个元素节点

    lastElementChild：返回节点的最后一个子节点

        示例：           

 <div>

            <p>hello</p>

            <p>world</p>

            </div>

            <script>

                var oDiv = document.querySelector('div')    //这个oDiv获取的是页面中的div元素，就是一个元素节点

                console.log(oDiv.lastElementChild)  //<p>world</p>

            </script>

            只获取一个节点，不再是位数组

            获取的是最后一个元素节点

            最后一个元素节点是<p>world</p>，是一个元素节点

    nextElementSibling：下一个节点

    previousElementSibling：上一个节点

8.获取元素节点的所有属性节点: attributes

    示例：       

 <ul>

      <li id='a' a='100'>hello</li>

 </ul>

 <script>

      var oli = document.querySelector('#a')  //这个oli获取的是页面中的li元素，就是一个元素节点

            console.log(oli.attributes)

 </script>

        获取的是一组数据，是该元素的所有属性，也是一个伪数组

        这个li又三个属性，id、a、test三个，所以就获取到了这三个

9.非常规节点获取

    获取html根节点：document.documentElement

    获取body节点：document.body

    获取head：document.head