JavaScript 获取Node节点的几种方式

文章目录

- DOM节点
- - 文档节点
  - 元素节点
  - 属性节点
  - 文本节点
  - 注释节点
- 获取子节点
- Js常用的四个选择器
- 测试节点元素

DOM节点

DOM中共有12种节点，最为常用的是以下五种
根据节点的不同 nodeType nodeValue nodeName三个属性也不一样

文档节点

document 一个文档只能有一个文档元素，在html中就是html元素，在xml中就是根元素

nodeType是9
nodeValue不可用
nodeName永远叫做#document

元素节点

页面中的各种元素，例如 div p table，通过getElementById('idName')等可以拿取

nodeType是1
nodeValue不可用
nodeName就是标签名称

元素节点可以使用 innerHTML和innerText修改元素内的结构

属性节点

一般是元素中的 class、id、src、href都属于属性

nodeType是2
nodeValue就是属性值
nodeName就是属性名

格式：属性名="属性值"
通过getAttribute('属性名')可以拿取属性值
通过setAttribute('属性名','属性值')可以设置属性值

文本节点

就是嵌套在标签中的内容

nodeType是3
nodeValue就是嵌套的文本
nodeName永远是#text

注释节点

nodeType是8
nodeValue不可用

获取子节点

firstChild:获取元素的首个子节点
lastChild:获取元素的最后一个子节点
childNodes:获取元素的节点列表

Js常用的四个选择器

根据唯一的id属性拿取一个元素节点
返回 Node

document.getElementById('idName')

根据标签名拿取类数组，里面封装了所有符合条件的元素节点
返回 NodeList

document.getElementsTagName('tagName')

根据name属性拿取类数组，里面封装了所有符合条件的元素节点
返回 NodeList

document.getElementsByName('name')

根据class名拿取类数组，里面封装了所有符合条件的元素节点
返回 NodeList

 document.getElementsByClassName('className')

测试节点元素

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>打印元素节点的节点类型和节点名</title>
	</head>
	<body>
		<div id="outter">测试1<span class="inner">测试2</span>测试3</div>

		<script>
		
			let domDiv = document.getElementById('outter')
			//打印元素节点的节点类型和节点名
			//console.log(domDiv.nodeType+'
'+domDiv.nodeName+'
'+domDiv.getAttribute('id'))
			console.log(domDiv.firstChild.nodeType+'
'+domDiv.firstChild.nodeValue+'
'+domDiv.firstChild.nodeName)
			console.log(domDiv.lastChild.nodeType+'
'+domDiv.lastChild.nodeValue+'
'+domDiv.lastChild.nodeName)
			//获取第一个子节点的nodeValue
			console.log(domDiv.childNodes[1].firstChild.nodeValue)
			//获取第一个子节点的超文本
            console.log(domDiv.childNodes[1].innerHTML)
        	//获取第一个子节点的文本
            console.log(domDiv.childNodes[1].innerText)
		</script>
	</body>
</html>