DOM:常用查找元素.

最新推荐文章于 2023-09-05 15:52:34 发布

我叫MD.

最新推荐文章于 2023-09-05 15:52:34 发布

阅读量469

点赞数 1

文章标签： dom操作

本文链接：https://blog.csdn.net/weixin_53542481/article/details/114506155

版权

HELLO!大家好!
今天的笔记是DOM的常用查找元素.

(1)不需要查找就可直接获得的元素对象: 4种:

  document.documentElement --<html>
  document.head   --<head>
  document.body    --<body>
  document.forms[i]   --<form>

(2)如果已经获得一个元素对象，找周围附近的元素对象时，就用按节点间关系查找：2大类关系，6个属性.
a. 父子关系: 4种

1).  元素.parentElement或元素.parentNode   //元素的父元素
2).  元素.children      //元素下的所有直接子元素
3). 元素.firstElementChild    //元素下的第一个直接子元素
4).  元素.lastElementChild   //元素下的最后一个直接子元素

b. 兄弟关系: 2种

1). 元素.previousElementSibling   //元素的前一个兄弟
2). 元素.nextElementSibling    //元素的后一个兄弟

(3). 如果用一个特征就能找到想要的元素，就用按HTML特征查找：4个方法:
a. 按id查找:

var 一个元素对象=document.getElementById("id名");

b. 按标签名查找:

var 类数组对象=任意父元素.getElementsByTagName("标签名")

c. 按class名查找:

var 类数组对象=任意父元素.getElementsByClassName("class名")

d. 按name名查找表单元素:

var 类数组对象=document.getElementsByName("name名")

(4). 如果通过复杂的查找条件，才能找到想要的元素时，就用按选择器查找: 2个方法

a. 只查找一个符合条件的元素:

var 一个元素=任意父元素.querySelector("任意选择器")

b. 查找多个符合条件的元素:

var 类数组对象=任意父元素.querySelectorAll("任意选择器")

总结: 查找函数的返回值规律:

如果原函数返回下标位置, 如果找不到，返回-1
如果原函数返回一个数组或一个对象，如果找不到，返回null
如果原函数返回类数组对象，如果找不到返回空类数组对象: { length:0 }

·
·

本人写博客就是想记录一下自己所学的知识（目前正在学习中），巩固知识加深记忆，也顺便分享一下自己的所学，有什么地方写的不对，希望大家可以多多指出，让我及时改正。如果我分享的东西帮助到你，别忘了点赞、分享、收藏呦~！

注：如有侵权，请联系删除。

我叫MD.

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DOM:常用查找元素.

HELLO!大家好!今天的笔记是DOM的常用查找元素.(1)不需要查找就可直接获得的元素对象: 4种: document.documentElement --<html> document.head --<head> document.body --<body> document.forms[i] --<form>(2)如果已经获得一个元素对象，找周围附近的元素对象时，就用按节点间关系查找：2大类关系，6个属性.a. 父
复制链接

扫一扫