2021-05-29 DOM元素的属性和操作:节点非内置属性,节点增删改查,cssDOM设置行内样式与非行内样式等

    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <p></p>
        <ol id="ol"></ol>
    </div>

1.获取节点(六种方法):

    var box = document.querySelector(".box");
    var ul = document.querySelector("ul");
    var lis = document.querySelectorAll("li");
    var p = document.getElementsByTagName("li");
    var ol = document.getElementById("ol");

2.节点的内置属性(还有img的src,a的href等内置属性)

    lis[1].innerText = "我是第二个li";
    /*innerHTML*/

输出结果:

3.节点的非内置属性

ul.setAttribute("type", "ulTag");//设置节点属性:属性名 属性值
console.log("获取ul节点的自定义属性:", ul.getAttribute("type")); //ulTag
ul.removeAttribute("type")//删除自定义属性:属性名
console.log("获取ul节点的自定义属性:", ul.getAttribute("type")); //null

4.节点的公共属性

    console.log(ul.parentElement); //父节点:box
    /*父节点:parentNode*/
    console.log(ul.children); //子节点:li
    /*子节点:firstElementChild,lastElementChild,childNodes*/
    console.log(ul.nextElementSibling); //下一个兄弟节点:p
    /*上一个兄弟节点:previousElementSibling*/

5.节点的增删改查

    var li = document.createElement("li"); //(元素节点的)节点创建
    li.innerHTML = "我是ol的li";
    ol.appendChild(li); // 节点追加
    ul.remove(); //节点删除

输出结果:ol下增加一个li,ul和其子元素li被删除

5.1.拓展1

	//创建文本节点(注意不是元素节点)
    var span = document.createTextNode("HELLO");
    //在box中,ol前面追加节点
    box.insertBefore(span, ol);
    //删除box下的子节点span
    box.removeChild(span);

5.2,拓展2:在for循环中动态创建li节点并追加到页面中

var arr = ["hello", "world", "this", "is", "a", "JavaScript"];
var newUl = document.createElement("ul");
newUl.id = "new_ul";
arr.forEach(v => {
    var li = document.createElement("li");
    li.innerHTML = v;
    newUl.appendChild(li);
})
box.appendChild(newUl);

输出结果:

6.行内样式和非行内样式的设置和获取
html:

<div class="box" style="width: 111px;height: 44px;"></div>

css:

.box {border: solid;}

js:

var box = document.querySelector(".box");
//1.1.行内样式的设置和获取
//设置行内样式
box.style.backgroundColor = "red";
// 获取行内样式
console.log(box.style.backgroundColor); //red
// 1.2.非行内样式的获取
// 非行内样式不能设置
// getComputedStyle(box).width = 400 + 'px';
//非行内样式只能获取
console.log(getComputedStyle(box).border); //3px solid rgb(0, 0, 0)

// 2.1.可以用非行内方式获取到行内样式
console.log(window.getComputedStyle(box).width); //111px
// 2.2不能用行内方式获取到非行内样式
console.log(box.style.border); //不报错的空输出
// console.log(getComputedStyle(box).backgroundColor); //rgb(255,0,0)

总结:

1.行内样式可以设置和获取,非行内样式只能获取不能设置
2.可以用获取非行内的方式得到行内样式,但不能用获取行内样式的方式得到非行内样式
3.为了权重问题,一般行内样式用来设置,非行内样式用来获取

7.非行内样式的兼容,封装和使用
7.1.测试IE环境下的非行内样式的获取

 console.log("我是IE的元素边框颜色:" + box.currentStyle.borderColor);
    console.log("我是IE的元素上边框粗细:" + box.currentStyle.borderTopWidth);
    console.log("我是IE的元素上边框粗细:" + box.currentStyle.border);
    console.log("我是IE的元素的宽:" + box.currentStyle.width);

输出结果:

7.2.兼容性封装

function getStyle(obj, attr) {
    if (obj.currentStyle) return obj.currentStyle[attr];//IE
    else return getComputedStyle(box)[attr];//非IE
}

7.3.调用封装函数

console.log("我是box的边框:" + getStyle(box, "border")); //我是box的边框:10px solid rgb(255, 0, 0)
/*样式名的双引号一定不能省略!!!*/