千锋web前端开发项目教程_1000集完全零基础入门HTML5+CSS3+JS到

1. 表格的创建

2. DOM节点的遍历:

      (父找子):

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

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

         childNodes:返回父节点的所有子节点,返回的文本节点和元素节点

         children:返回父节点的所有子节点,返回元素节点

      (子找父):

         parentNode

      (兄弟):

         nextElementSibling 下一个节点

         previousElementSibling 上一个节点

3.  各种文本:

    js中使用的文本分为两类:

      a.表单元素的value

      b.innerHTML (不包含自身标签的所有内容) //读文本内容

        作用:常用于字符串拼接页面

        var oUl = document.querySelector("ul");

        for(var i=0; i<10; i++){

        oUl.innerHTML += "<li>"+i+"</li>";

    }

除此之外:outerHTML:包含自身标签的所有内容

        innerText:只打印文本内容,不包含标签

4.  dom节点操作的就是属性,围绕各种属性的读写去学习.

    属性大致分为:

    a.普通属性

      方法1:.运算

         读:  

             var oBox = document.querySelector("#boxxxx");

             console.log(oBox.id);

        写:  oBox.id = "hahaha";

      方法2:getAttribute/setAttribute方法

        读: dom对象.getAttribute(属性名)

        写:dom对象.setAttribute方法(属性名,属性值)

       添加自定义属性:

           var oBox = document.querySelector("#boxxxx");

           oBox.aaaa = 99999;

           console.log(oBox.aaaa);

        b.style属性

          读:getComputedStyle(dom节点,false)["属性名"]:返回属性值

           console.log(getComputedStyle(oBox,false)["fontSize"]);

          写:dom节点.style.属性名="属性值"

       注意 属性值全是字符串

       eg:oBox.style.height=200+"px";

        c.offset相关属性

        c.offset相关属性

           写:dom节点.style.属性名="属性值"

       注意 属性值全是字符串

           

            读:offset读出来的都是数字

              用上述style属性方式的读 读出来的是带px的字符串,但实则要的是数字

            dom节点.offsetWidth

            dom节点.offsetHeight

            dom节点.offsetLeft

            dom节点.offsetTop