DOM 节点(node)：包含HTML DOM(文档对象模型)中的所有内容，Document本身-文档节点、HTML 元素(标签)-元素节点、HTML 属性-属性节点、元素内的文本-文本节点(文字、换行、空格、回车)、注释-注释节点
DOM 元素(element)：HTML页面中所有的标签，元素包含在节点之中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div>
<p>我是文字节点，包含我的p标签即是节点，也是元素</p>
</div>
<script>
var oP = document.querySelector('p')
var oDiv = document.querySelector('div')
var oBody = document.querySelector('body')
console.log(oP)
console.log(typeof oDiv) // 节点和元素都是对象类型
// button标签的父级节点，parentNode 是节点方法
console.log(oP.parentNode) // div对象
// button标签的父级元素，parentElement 是元素方法
console.log(oP.parentElement) //div对象，说明标签即是节点也是元素
// 获取 body 对象的子节点
console.log(oBody.childNodes)
// 获取 body 对象的子元素
console.log(oBody.children)
</script>
</body>
</html>
元素是节点中的一种，元素对象(Element 对象)内可以包含元素节点、文本节点、注释节点的子节点(父子关系)。元素也可以拥有属性。
网友评论