js学习第十天

### 事件头

       事件体在页面渲染的时候并不执行,

            只有用户通过该动作触发事件，才会执行该代码

             parentNode:子找父

           

            如何解决该问题

             this:是函数体的内置对象,this只能出现在函数体内

             当this与事件体连用时,this代表触发事件时的元素

###  childNodes

      childNodes:返回父元素的所有子节点，包含元素和文本节点，存放在数组中

      children:返回所有父元素的子节点，只包含元素节点,存放至数组中

      节点访问的属性

            父找子

            firstElementChild 返回节点的第一个子节点

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

            childNodes

            children

            兄弟

            nextElementSibling 下一个节点

            previousElementSibling 上一个节

     

            子找父

            parentNode

 

### 各种文本

    outerHTML/innerText/innerHTML

      outerHtml:打印包含自身标签的所有内容

      innerText:只打印文本，不打印内容

      innerHTML:打印不包含自身标签的所有内容

### dom普通属性的读写

    1:打点 进行读写

    2：getAttribute/setAttribute方法

    3：为dom元素添加自定义属性

        dom.新属性名 = 属性值

### domStyle属性读写

    特指非行内的style属性

       dom对象.style.分属性名

           样式的写

           oBox.style.backgroundColor = "red";

           样式的读

           必须用:getComputedStyle(dom对象,false)["属性名"]

 

###  domOffset属性读写

 

            读:读出的数据都是数字

            offsetWidth/offsetHeight/offsetLeft/offsetTop

             console.log(oBox.offsetHeight);

 

             写:带px的字符串

               oBox.style.width = "200px";

     搞清楚以下的读写方式

           dom普通属性(除了style和offset相关属性)

           domStyle属性

           domOffset属性