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就是标签名称

元素节点可以使用 innerHTMLinnerText修改元素内的结构

属性节点

一般是元素中的 classidsrchref都属于属性

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">测试2span>测试3div>

		<script>
		
			let domDiv = document.getElementById('outter')
			//打印元素节点的节点类型和节点名
			//console.log(domDiv.nodeType+'\n'+domDiv.nodeName+'\n'+domDiv.getAttribute('id'))
			console.log(domDiv.firstChild.nodeType+'\n'+domDiv.firstChild.nodeValue+'\n'+domDiv.firstChild.nodeName)
			console.log(domDiv.lastChild.nodeType+'\n'+domDiv.lastChild.nodeValue+'\n'+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>

你可能感兴趣的:(#,JavaScript,javascript,前端,html)