day10 BOM、DOM（获取子元素、文本、属性读写，样式读写，offset、window.onscroll）-CSDN博客

本文链接：https://blog.csdn.net/serendipitymm/article/details/120222270

1、动态表格的创建案例：

2、childNodes和children

1、动态表格的创建案例：

 <script>

    var count=0;

    var oTable=document.createElement("table")

    oTable.border="1px"

    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)

</script>

2、childNodes和children

childNodes:批量获取父元素的子元素，存储至数组中（返回元素和文本节点）

children：批量获取父元素的子元素，存储至数组中（返回元素节点）

3、各种文本

innerText:纯文本，不包含标签

outerHtml：包含自身标签的所有内容

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

innerHTML作用：拼接字符串创建HTML元素，搭建页面

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

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

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

}

4、属性的读写

a.对象.属性名（.是域运算符）

写：oBox.id=" "

读：console.log(oBox.id);

.getAttribute/setAttribute

setAttribute（“属性名称”，“属性值名称”）

getAttribute("属性名称")：返回属性名称对应的属性值

可以通过setAttribute设置自定义属性

// 添加自定义属性
	 var oBox = document.querySelector("#box");
	 oBox.yingyingying = 123;
	 console.log(oBox.yingyingying);
	// console.log(oBox.getAttribute("yingyingying"));出不来
	
	oBox.setAttribute("a","666");
	console.log(oBox.getAttribute("a"));
	//console.log(oBox.a);出不来
	
	//结论:添加自定义属性时，必须用相应的方式读写

5、选项卡案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #box{
            width: 600px;
            height: 400px;
            border: 1px solid red;
            position: absolute;
            margin: auto;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
        }
        #box>ul{
            height: 100px;
            display: flex;
            justify-content: space-between;
            border: 1px red solid;
        }
        li{
            width: 24%;
            border: 1px solid red;
            text-align: center;
            line-height: 100px;;
        }
        #sbox{
            width: 100%;
            height: 300px;
            border: 1px solid red;
        }
        .newstyle{
            background-color: skyblue;
            color: hotpink;
        }
        .oldstyle{
            background-color: #fff;
            color: black;
        }
    </style>
</head>
<body>
    <div id='box'>
        <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
        <div id='sbox'>

        </div>
    </div>
</body>
</html>
<script>
    var mLi=document.getElementsByTagName("li");
    var mBox=document.getElementById("sbox")
    for(var i=0;i<mLi.length;i++){
        mLi[i].index=i;//添加自定义属性传递下标
        mLi[i].onclick=function(){
           //遍历，被点击的元素高亮，其他的都不变
           for(var j=0;j<mLi.length;j++){
               if(this.index==j){
                   mLi[j].className="newstyle"
               }else{
                   mLi[j].className='oldstyle'
               }
           }
           switch (this.index){
               case 0:
               mBox.style.backgroundColor='blue';
               break;
               case 1:
               mBox.style.backgroundColor='pink';
               break;
               case 2:
               mBox.style.backgroundColor='orange';
               break;
               case 3:
               mBox.style.backgroundColor='yellow';
               break;
           }
        }
    }
</script>

六、样式的读写

行内样式读：console.log(oBox.style.width);

非行内样式读：getComputedStyle(dom对象,false)["属性名"]:返回属性值

行内样式，非行内样式的写：dom对象.style.属性名 = 属性值;

七、insterBefore

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

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul id="list">
            <li>槑槑</li>
            <li>晶晶</li>
            <li>叕叕</li>
        </ul>
    </body>
</html>
<script>
    var list = document.getElementById("list");
    var o = document.createElement("li");
    o.innerHTML = "淼淼";    
    //如果参数2位null，则和appendChild一样
    //list.insertBefore(o,null);
    list.insertBefore(o,list.children[2]);
</script>

八、offset的相关属性

// 写:必须传入加px的字符串
	oBox.style.width = "500px";
	oBox.style.height = 500+"px";//元素的高
	oBox.style.left = 400+"px";//距离父元素左侧的距离
	oBox.style.top = 400+"px";
	
	//读:全都是纯数字
	console.log(oBox.offsetWidth);
	console.log(oBox.offsetHeight);
	console.log(oBox.offsetLeft);
	console.log(oBox.offsetTop);