1.文档------->document
2.元素------->页面中所有的标签,元素(element)
根元素:html标签
3.节点------->页面中所有的内容(标签、属性、文本(文字、换行、空格、回车)),Node
节点的属性:
nodeType:节点的类型:1=====》标签, 2=======》属性, 3======》文本
nodeName:节点的名字:标签节点---》大写的标签名字,属性节点---》小写的属性名字,文本节点-----#text
nodeValue:节点的值:标签节点----null,属性节点-----属性值,文本节点-----文本内容
获取相关的节点:
1.获取当前节点的父级节点:
//获取当前标签的id对象
var a = document.getElementById("id名称");
//在控制台输出当前标签的父级节点
console.log(a.parentNode);
//在控制台输出当前标签的父级元素
console.log(a.parentElement);
//在控制台输出标签的属性
console.log(ulObj.parentNode.nodeType);//标签的---1
console.log(ulObj.parentNode.nodeName);//标签---大写的标签名字
console.log(ulObj.parentNode.nodeValue);//标签---null
2.获取所有的子节点和子元素
//获取标签对象
var a = document.getElementById("id名称");
//在控制台输出
console.log(a.childNodes);
console.log(a.children);
3.获取节点的其他方法
//获取父级节点
console.log(a.parentNode);
//获取父级元素
console.log(a.parentElement);
//获取子节点
console.log(a.childNodes);
//获取子元素
console.log(a.children);
//获取第一个子节点
console.log(a.firstChild);
//获取第一个子元素
console.log(a.firstElementChild);
//获取最后一个子节点
console.log(a.lastChild);
//获取最后一个子元素
console.log(a.lastElementChild);
//获取某个元素的前一个兄弟节点
console.log(a.previousSibling);
//获取某个元素的前一个兄弟元素
console.log(a.previousElementSibling);
//获取某个元素的后一个兄弟节点
console.log(a.nextSibling);
//获取某个元素的后一个兄弟元素
console.log(a.nextElementSibling);