DOM中的增删改查之查找

最新推荐文章于 2021-06-08 16:39:02 发布

运维客

最新推荐文章于 2021-06-08 16:39:02 发布

阅读量669

点赞数

分类专栏： DOM 文章标签： javascript dom

本文链接：https://blog.csdn.net/weiwri/article/details/105311250

版权

DOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.查找元素

1. 不需要查找就可以直接获得的元素

      //document.documentElement ***
       <html></html>
      //document.head
      <head></head>
      //document.body
      <body></body>

2. 按节点间关系查找

1.节点.parentNode 获得当前节点的父节点
2.父节点.childNodes 获得当前父节点下的所有直接子节点的集合(类数组对象)
3.父节点.firstChild 获得当前父节点下的第一个直接子节点.
4.父节点.lastChild 获得当前父元素下最后一个子节点
5.节点.previousSibling 获得当前节点平级的前一个相邻兄弟的节点.
6.节点.nextSibling 获得当前节点平级的下一个相邻兄弟的节点

注意:看不见的换行和空字符同样是节点对象,会严重干扰查找,所以我们通常采用元素树(即元素间关系查找).

3. 按元素间关系查找

1.元素.parentElement(也可以用parentNode) 获得当前元素的父元素
2.父元素.children获得当前父元素下的所有直接子元素的集合(类数组对象)
3.父元素.firstElementChild 获得当前父元素下的第一个子元素
4.父元素.lastElementChild 获得当前父元素下的最后一个直接子元素
5.元素.previousElementsibling 获得当前元素平级的前一个相邻元素
6.元素.nextElementsibling 获得当前元素平级的下一个相邻元素

当我们已经获得一个节点(元素时),想要查找周围的元素,就用节点(元素间关系查找)

4.按HTML特征查找

1.按id属性查找
    var 元素=document.getElementById("要查找的id属性")
    如果找到,返回一个元素对象,没找到返回null(空)
    强调:只能用document调用,不能随意使用父元素调用
    特别注意:id如果
2. 按标签名查找
	var 集合=父元素.getElementsByTagName("标签名")
	在指定父元素下查找所有标签名为指定标签名的后代元素。
	   返回值: 如果找到，返回多个元素组成的集合
			如果没找到，返回空集合: [].length=0
			强调: 
			a. 可在任意父元素下查找。通常指定在某个父元素下查找后代，是为了减少查找范围，提高查找效率。
			b. 不止查找直接子元素，而是在所有后代中查找。
			3. 按class属性查找
	var 集合=父元素.getElementsByClassName("类名")
	在指定父元素内，查找class属性中包含指定类名的所有元素
	返回值: 如果找到，返回多个元素组成的集合
		    如果没找到，返回空集合: [].length=0
	     	强调: 如果网页中的id元素没有与js中的元素重复,即直接编程windows全局变量,可直接使用,但不建议这么做(有兼容性问题)
			a. 可限制在任意父元素内查找，减少查找范围。
			b. 不仅查找直接子元素，且在所有后代中查找。
			c. 如果一个元素同时被多个class修饰，则使用其中一个class，就可找到该元素。无需所有class都满足
			4. 按name属性查找
	var 集合=document.getElementsByName("name名")
	在整个网页中查找name属性值为指定name名的元素。
		返回值: 如果找到，返回多个元素组成的集合
			如果没找到，返回空集合: [].length=0
		强调: 只能用document调用，不能用随意一个父元素调用。
		何时: 在表单中查找表单元素时
	问题: 所有返回集合的查找函数，在任何情况下都会返回一个集合。即使只找到一个元素，也放在一个集合中返回。

5.按选择器查找

    a. 只查找一个符合条件的元素:
		var 元素=父元素.querySelector("任意复杂的选择器")
		在指定父元素下查找符合选择器要求的一个元素
		返回值: 如果找到，返回一个元素对象
				如果没找到，返回-1
	2. 查找多个符合条件的元素: 
		var 集合=父元素.querySelectorAll("任意复杂的选择器")
		在指定父元素下查找符合选择器要求的多个元素
		返回值: 如果找到，返回多个元素的集合
				如果没找到，返回空集合: [].length=0
	强调: 1. 可以以任意父元素调用来限制查找的范围
		2. ()中的选择器参数，不用每次都写完整。只要以.前的父元素为起点开始写就行！

6.css查找:详情请看DOM修改那篇文章
总结:

不需要查找就可直接获得:
document.documentElement
document.head
document.body
按节点间关系查找:
1. 父子关系;
  元素.parentNode
  父元素.children
  元素.firstElementChild
  元素.lastElementChild
2. 兄弟关系:
  元素.previousElementSibling
  元素.nextElementSibling
按HTML特征查找：
var 元素=document.getElementById(“id”)
var 集合=父元素.getElementsByTagName(“标签名”)
var 集合=父元素.getElementsByClassName(“class名”)
var 集合=document.getElementsByName(“name名”)
按选择器查找:
var 元素=父元素.querySelector(“任意选择器”)
var 集合=父元素.querySelectorAll(“任意选择器”)