DOM获取元素的相关API

最新推荐文章于 2022-09-25 01:42:22 发布

两把伞

最新推荐文章于 2022-09-25 01:42:22 发布

阅读量236

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zuoyouzouzou/article/details/84067133

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

作为一名后端人员，要兼顾前端，有点痛苦，这个笔记是参考犀牛书。

	$(function(){
		$(".userOperationMonitor input").on("click",userOperationMonitor)
	})
	// 获取元素中的操作
	function userOperationMonitor(e){
		console.log(e);// 尝试输出e，看看里面有啥
		// 获取当前元素的下一个兄弟元素
		console.log(e.currentTarget.nextElementSibling); 
		// 获取当前元素的下一个兄弟元素，不管有没有空格，获取的是元素/null
		console.log(this.nextElementSibling);
		//获取当前元素的下一个节点，如果为文本节点，那么就是文本，
		console.log(this.nextSibling);
		// 获取父元素节点
		console.log(this.parentNode);
	}

详情现：

选取文档元素

选取元素、查询文档的一个或多个元素的方法：
用指定id的属性；
用指定的name属性
用指定的标签名字
用指定的CSS类
匹配指定的CSS选择器

通过ID选取元素

var section1 = document.getElementyId("section1");

示例：通过ID查找多个元素：

/** 
* 函数接受任意多的字符串的参数
* 每个参数将当作元素的id传给document.getElementById()
* 如任何一个id对应的元素的未定义，则抛出异常
*/
function getElements(/*ids...*/){
	var elements = {};
	for(var i=0;i<arguments.length;i++){
		var id = arguments[i];
		var elt = document.getElementById(id);
		if(elt == null){
			throw new Error("no element with id: "+ id);
		}
		elements[id]=elt;
	}
	return elements;
}

通过名字选取元素

var radiobuttons = document.getElementsByName("favorite_color);
// 获取的是一个数组，即使长度为1也是一个数组

通过标签名获取

var spans = document.getElementsByTagName("span");
// 获取的是一个数组，即使长度为1也是一个数组

通过CSS类选取元素

// 查找其class属性值中包含"warning"的所有元素
var warnings = document.getElementsByClassName("warning");
// 查找以"log"命名并且有"error "和"fatal"类的元素的所有后代
var log = document.getElementById("log");
var fatal = log.getElementsByClassName("fatal error");

通过CSS选择器选取元素

 #nav 			// id="nav"的元素
div				// 所有<div>元素
.warning		// 所有在class属性值中包含了"warning"的元素

元素可以基于属性值来选取

p[lang="fr"] 	// 所有使用语法的段落,如：<p lang="fr">
*[name="x"] 	// 所有包含name="x"属性的元素

选择器的组合使用：

span.fatal.error		// 其class中包含"fatal"和"error"的所有<span>元素
span[lang="fr"].warning 	// 所有使用语法的且其class中包含"warning"的<span>元素

选择其可以指定文档结构：

#log span 		// id="log"元素的后代元素中的所有<span>元素
#log>span		// id="log"元素额子元素中的所有<span>元素
body>h1:first-child	// <body>的子元素的第一个<h1>元素

组合选择器

div,#log	// 所有div，以及id='log"的元素

终极大招

querySelectorAll() 接受包含一个CSS选择器的字符串参数，返回一个表示文档中匹配选择器的所有元素的NodeList对象。
querySelector() 与querySelectorAll()类似，只返回第一个匹配的元素。

文档结构和遍历

一旦从文档中选取了一个元素，有时候需要查找问而当中与之在结构上相关的部分(父亲、兄弟、子女)。

作为节点树的文档

Document对象，他的Element对象和文档中的表示文本的Text对象都是node对象。Node设定了以下重要的属性：
	parentNode
		该节点的父节点，或者针对类似Document对象应该是null，因为它没有父节点。
	childNodes
		只读的类数组对象(NodeList对象)，它是该节点的实时表示。
	firstChild、lastChild
		该节点的子节点的第一个和最后一个，如果该节点没有子节点则为null。
	nextSibling、previousSibling
		该节点的兄弟节点中的前一个和下一个。具有相同父节点的两个节点为兄弟节点。节点的顺序反应了他们在文档中出现的顺序。这两个属性将节点以双向链表的形式连接起来。
	nodeType
		该节点的类型。9代表document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点。
	nodeValue
		Text节点或者Comment节点的文本内容。
	nodeName
		元素的标签名，以大写的形式表示。
示例：

得到文档的第一个子节点下面的第二个子节点的引用：

document.childNodes[0].childNodes[1];
document.firstChild.firstChild.nextSibling;

作为元素树的文档

当将主要的兴趣点集中在文档中的元素上而非它们之间的文本(和他们之间的空白)上时，我们可以使用另外一个更有用的API。它将文档看作是一个Element对象树，忽略部分文档Text和Comment节点。

注意：任何一个Element的parentNode总是另一个Element。

基于元素的文档遍历API的第二部分是Elements属性，后者类似Node对象的子属性和兄弟属性：

firstElementChild，lastElementChild 		
	类似firstChild和lastChild,但只代表Element。 	
nextElementSibling，previousElementSibling 		
	类似nextSibling和previousSibling，但只代表兄弟Element。 
childElementCount 		
	子元素的数量。返回的值和children.length值相等。

示例15-2：可移植的文档遍历函数

	/**
* 返回元素e的第n层祖先元素，如果不存在此类元素或祖先不是element
* (例如Document或者DocumentFragment) 则返回null
* 如果n为0，则返回e本身。如果n为1，或者省略，则返回其父元素
* 如果n为2，则返回其祖父元素，依次类推。
*/
function parent(e,n){
	if (n === undefined) n=1;
	while(n-- && e) e = e.parentNode;
	if(!e || e.nodeType !==1) return null;
	return e;
}

/**
* 返回元素e的第n个兄弟元素
* 如果n为正，返回后续的第n个兄弟元素
* 如果n为负，返回前面的第n个兄弟元素
* 如果n为0，则返回e本身。
*/
function sibling(e,n){
	while(e && n !==0){	// 如果e未定义，即立刻返回它
		if(n > 0){	// 查找后续的兄弟元素
			if(e.nextElementSibling) e=e.nextElementSibling;
			else{
				for(e=e.nextSibling;e && e.nodeType !==1;e=e.nextSibling)
			}
			n--;
		}else{	// 查找前面的兄弟元素
			if(e.previousElementSibling) e = e.previousElementSibling;
			else{
				for(e.previousSibling;e&&e.nodeType!==1;e=e.previousSibling)
			}
			n++;
		}
	}
	return e;
}

两把伞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM获取元素的相关API

作为一名后端人员，要兼顾前端，有点痛苦，这个笔记是参考犀牛书。选取文档元素选取元素、查询文档的一个或多个元素的方法：用指定id的属性；用指定的name属性用指定的标签名字用指定的CSS类匹配指定的CSS选择器通过ID选取元素var section1 = document.getElementyId(&amp;quot;section1&amp;quot;);示例：通过ID查找多个元素：/** * 函数接受...
复制链接

扫一扫