动态表格创建、父节点找子节点的属性、各种文本、元素的属性、选项卡、获取非行内样式、insertBefore、各种位置、winndow.oncroll

动态表格创建

注意事项:
         事件的绑定和事件体是两种不同类型代码
         事件绑定的代码行自上而下执行
        事件体的代码行必须通过动作触发
         事件的执行在页面渲染完之后

oDelTd.parentNode.remove();无法实现功能
            解决方案:this是函数的内置对象
            事件体内的this:代表触发事件的元素

父节点找子节点的属性

父节点.childNodes:返回所有的子节点,存放至数组中
   var oUl = document.querySelector("ul");
  var oLis = oUl.childNodes;//获取的节点包含文本和元素节点

children:返回所有的子节点,存放至数组中
    var oUl = document.querySelector("ul");
    var oLis = oUl.children;//只获得父节点的元素子节点
    for(var i=0; i<oLis.length; i++){
        console.log(oLis[i].innerHTML);
    }

各种文本

各种文本
    var oBox = document.querySelector("#box");
    innerText:只输出对象的文本内容
    console.log(oBox.innerText);
    outerHTML:打印包括自身标签的所有内容
    console.log(oBox.outerHTML);
    innerHTML:代表当前元素的所有内容
    console.log(oBox.innerHTML); 

 

innerHTML实际用法:通过字符串拼接,批量创建dom节点
    var oUl = document.querySelector("ul");
    oUl.innerHTML = "<li>heihei</li>";
    oUl.innerHTML += "<li class='test'>haha</li>";
    
    for(var i=0; i<10; i++){
        oUl.innerHTML += "<li>" + i + "</li>";
    } 

属性读写

a.通过点(域运算符)

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

写 oBox.id = "heihei";

console.log(oBox.id);

b.getAttribute/setAttribute

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

写 oBox.setAttribute("id","heihei");

读 console.log(oBox.getAttribute("id"));

为任意对象添加自定仪属性

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

a.点方法
oBox.heihei = "haha";

b.setAttribute方法

用相应的方式获取对应的属性

样式的读写

读:
    行内读:

var oBox1 = document.querySelector("#box1");
    console.log(oBox1.style.color);

非行内读:
    var oBox2 = document.querySelector("#box2");
   getComputedStyle(dom对象,false)["属性名"]:返回属性名对应的属性值
    console.log(getComputedStyle(oBox2,false)["color"]);

写:行内外一毛一样
    oBox1.style.color = "yellow";

insrtBefore

父节点.insertBefore(目标节点,参照节点):将目标节点添加至参照节点之前

参数二为null，等价于appendChild

各种位置

读写属性

读写样式

读写offset相关属性

读：返回的数据全是数字

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

    console.log(oBox.offsetWidth);
    console.log(oBox.offsetHeight);
    console.log(oBox.offsetLeft);
    console.log(oBox.offsetTop);

写
    oBox.style.width = "500px";
    oBox.style.height = "400px";
    oBox.style.left = "500px";
    oBox.style.top = "500px";

滚动事件

var _top = document.body.scrollTop || document.documentElement.scrollTop;
        console.log(_top);

document.body.scrollTop = document.documentElement.scrollTop = 0;