JS--Day10(dom节点遍历操作)

一.表格的创建

   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");
        oDelTd.innerHTML = "删除";
        oTr.appendChild(oDelTd);

        oDelTd.onclick = function(){//事件体的执行时间点?--->页面渲染完之后
            //parentNode 子找父
            // oDelTd.parentNode.remove();

            //解决方案:this->函数体的内置对象
            //当this出现在作为事件体的函数中,this代表触发该事件的元素本身(状态为动态)
            this.parentNode.remove();
        }
        oTable.appendChild(oTr);
    }
    document.body.appendChild(oTable);

初识this事件体代码的执行时间和其它代码不同，页面渲染之后执行

二.节点遍历的属性

①父找子：

childNodes返回的是所有的孩子节点，存储在数组中,返回元素和文本节点

children返回的是所有的孩子节点，存储在数组中,返回元素节点

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

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

②子找父:

parentNode 父节点

③兄弟节点:

nextElementSibling 下一个节点

previousElementSibling 上一个节点

三.js文本总结

①outerHTML:包含自身标签的所有文本

②innerText:只显示文本，不显示标签

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

四.dom节点的操作

dom有什么需要操作:属性

a.普通属性

方法1:点运算符 dom对象.属性名

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

读 console.log(oBox.id);

写 oBox.id = "hello";

方法2: getAttribute/setAttribute

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

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

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

添加自定义属性:

dom对象.属性名 = 属性值;

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

读console.log(oBox.x);

写oBox.x = 666;

b.style属性

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

写

oBox.style.backgroundColor = "yellow";

className一次赋值一个类的样式

oBox.className = "myStyle";

读

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

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

c.offset属性

全都是用来读,读出的数字

offsetWidth/offsetHeight/offsetLeft/offsetTop

写全都是style,值都是带px的字符串 "200px"

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

写

oBox.style.width = "200"+"px";

oBox.style.left = "100"+"px";

读

console.log(oBox.offsetWidth);

console.log(oBox.offsetHeight);

五.选项卡

  var oLi = document.getElementsByTagName("li");
    var oContent = document.querySelector(".content");
    for(var i=0; i<oLi.length; i++){
        //index是添加的自定义属性,通过index记录当前被点击元素的下标
        oLi[i].index = i;
        oLi[i].onclick = function(){
            for(var j=0; j<oLi.length; j++){
                if(this.index == j){
                    oLi[j].className = "newStyle";
                }else{
                    oLi[j].className = "oldStyle";
                }
            }
            switch(this.index){
                case 0:
                    oContent.style.backgroundColor = 'red';
                    break;
                case 1:
                    oContent.style.backgroundColor = 'yellow';
                    break;
                case 2:
                    oContent.style.backgroundColor = 'blue';
                    break;
                case 3:
                    oContent.style.backgroundColor = 'green';
                    break;
            }
        }
    }