JS学习笔记（四）

细节知识回顾：

//获取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