细节知识回顾:
//获取body元素
var bodyEle=document.body;
console.log(bodyEle);
//设置body背景图片路径
body.style.backgroundImage='url('+this.src+')';
//获取html元素
var htmlEle=document.documentElement;
console.log(htmlEle);
// console.log(htmlEle.innerHTML);
父节点parentNode用法:
//选取ul表中的第一个li
var li1=document.querySelector('li');
//快速获取其父节点ul
var ul1=li1.parentNode;
子节点childNode用法:
//选取ul表
var ul=document.querySelector('ul');
//此时ul.childNodes[i]代表第i个孩子标签(元素节点)
for(var i=0;i<ul.childNodes.length;i++){
if(ul.childNodes[i].nodeType==1){
console.log(ul.childNodes[i]);
}
}
关于其中nodeType的值的含义:
注意:获取字节点只需要获取元素节点时,直接使用ul.children更为方便!
ul.children案例:
//选取ol表
var ol=document.querySelector('ol');
//获取第一个元素内文字
console.log(ol.children[0].innerText);
console.log(ol.firstElementChild.innerText);
//注意,firstElementChild仅支持i9以上版本
//获取最后一个元素内文字
console.log(ol.children[ol.children.length-1].innerText);
console.log(ol.lastElementChild.innerText);
运行结果:
兄弟节点:
上一个兄弟:.previousSibling,.previousElementSibling下个兄弟:.nextSibling,.nextSiblingElementSibling
动态添加评论案例:19-简单版发布留言案例_哔哩哔哩_bilibili