<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")); //ulTagul.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下的子节点spanbox.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];//IEelse return getComputedStyle(box)[attr];//非IE}
7.3.调用封装函数
console.log("我是box的边框:" + getStyle(box, "border")); //我是box的边框:10px solid rgb(255, 0, 0)/*样式名的双引号一定不能省略!!!*/
-05-29 DOM元素的属性和操作:节点非内置属性 节点增删改查 cssDOM设置行内样式与非行内样式等
