表格的动态创建

表格的动态创建

var oTable = document.createElement("table");
oTable.border = "1px";
var count = 0;
​
for (var i = 0; i < 3; i++) {
    var oTr = document.createElement("tr");
    for (var j = 0; j < 3; j++) {
        var oTd = document.createElement("td");
        oTd.innerHTML = ++count;
        oTr.appendChild(oTd);
    }
​
    var oDelTd = document.createElement("td");
    oTr.appendChild(oDelTd);
    oDelTd.innerHTML = "删除";
​
    //事件头部
    oDelTd.onclick = function() { //事件体:在页面渲染的时候，并不执行
        //只有当用户触发该事件时，才会去执行事件体的代码
        // parentNode:找当前元素的父元素 
        // oDelTd.parentNode.remove();
​
        //解决方案:
        //this:是函数体的内置对象(只能出现在函数体内部),在与事件体连用时,
        //this代表触发该事件的对象本身。
        this.parentNode.remove();
    }
​
    oTable.appendChild(oTr);
}
​
document.body.appendChild(oTable);

childNodes_children

父找子
childNodes: 批量获取父元素的子元素, 存放在数组中, 获取文本和元素节点
    var oUl = document.querySelector("ul");
    var oLis = oUl.childNodes;
        for (var i = 0; i < oLis.length; i++) {
            if (oLis[i].nodeType == 3) {
                oLis[i].remove();
            }
        }
​
        for (var i = 0; i < oLis.length; i++) {
            console.log(oLis[i].innerHTML);
        }
​
children:批量获取父元素的子元素, 存放在数组中, 获取元素节点
    var oUl = document.querySelector("ul");
    var oLis = oUl.children;
​
        for (var i = 0; i < oLis.length; i++) {
            console.log(oLis[i].innerHTML);
        }
==============================================================
节点遍历属性总结（元素节点）
父找子
    firstElementChild: 返回节点的第一个子节点， 最普遍的用法是访问该元素的文本节点
    lastElementChild: 返回节点的最后一个子节点
    childNodes: 批量获取父元素的子元素, 存放在数组中, 获取文本和元素节点
    children: 批量获取父元素的子元素, 存放在数组中, 获取元素节点
兄弟
    nextElementSibling: 下一个节点
    previousElementSibling: 上一个节点
子找父
    parent: 找父元素

各种文本内容

var oDiv = document.querySelector("#box");
innerText:将元素的内容获取出来不包括HTML标签
    console.log(oDiv.innerText);
outerHTML:将自身以及子元素所有的内容都获取出来 包括HTML标签 包括自身标签
    console.log(oDiv.outerHTML);
innerHTML:除了自身标签的所有内容，最常用
    console.log(oDiv.innerHTML);
​
-----------------------------------------------------
var oP = document.querySelector("p");
console.log(oP.innerHTML);
oP.innerHTML = 666;
​
通过字符串拼接HTML页面
    var oUl = document.querySelector("ul");
    oUl.innerHTML = "<li>123</li>";
    oUl.innerHTML += "<li>456</li>";
​
    for (var i = 0; i < 10; i++) {
        oUl.innerHTML += "<li>" + i + "</li>";
    }

dom普通属性的读写

dom属性
    a.点运算符
        var oBox = document.querySelector("#box");
    写 
        oBox.id = "heihei";
    读 对象.属性名
         console.log(oBox.id);
​
    b.getAttribute/setAttribute方法
    写
        oBox.setAttribute("id", "yingyingying");
    读
        console.log(oBox.getAttribute("id"));
​
    c.为dom元素添加自定义属性
    dom对象.新属性名 = 属性值
        oBox.x = 999;
        console.log(oBox.x);

domStyle属性

写
    dom对象.style.属性名 = 属性值
    oBox.style.fontSize = "8px";
    oBox.style.width = "800px";
读
只有行内样式可以dom.style.属性名的方式读取数据,非行内样式不行
非行内样式
getComputedStyle(dom对象, false)["属性名"];
    console.log(getComputedStyle(oBox, false)["fontSize"]);
    console.log(getComputedStyle(oBox, false)["backgroundColor"]);   

domOffset属性

offset相关属性的读必须用offset读
    var oBox = document.querySelector("#box");
读
读出来的数据都是数字
    console.log(oBox.offsetWidth);
    console.log(oBox.offsetHeight);
    console.log(oBox.offsetLeft);
    console.log(oBox.offsetTop);
​
写
加px的字符串
    oBox.style.width = "600px";
    oBox.style.left = "50" + "px";