Javascript————DOM获取元素

最新推荐文章于 2025-07-02 18:07:29 发布

原创最新推荐文章于 2025-07-02 18:07:29 发布 · 906 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #html5 #css

2.getElementsByTagName()

3.getElementsByName()

4.getElementsByClassName()

5.childNodes、children

6.firstChild、firstElementChild

12.document.querySelector()

13.document.querySelectorAll()

1、DOM

文档对象模型（Document Object Model ，简称DOM），它就是一些系列编程接口，有了这些接口，就可以改变页面内容，结构和样式

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中所有的标签都是元素，DOM中使用element表示

节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作是对象

2、事件前言

事件，就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动，关闭窗口.....

第一种方式：

标签中对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会被执行

这种方式：结构与行为耦合，不方便维护，不推荐使用

<button id="btn" onclick="fun()">我是一个按钮</button>

<button id="btn" onclick="alert('你好')">我是一个按钮</button>

第二种方式

可以为按钮的对应事件绑定处理函数的形式来响应事件

这样当事件被触发时，其对应的函数将会被调用

// 第一步：获取元素

let btn = document.getElementById("btn");

console.log(btn);

// 第二步：给元素绑定事件  第三步：事件的处理函数（匿名函数）

btn.onclick = function () {

alert("hello");

};

3、文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行,如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。

第一种加载情况：

将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码

<button id="btn">点我一下</button>

  <script type="text/javascript">

    //获取id为btn的按钮

    var btn = document.getElementById("btn");

    //为按钮绑定一个单击响应函数

    btn.onclick = function () {

      alert("hello");

    };

  </script>

第二种加载写法：

onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

window.onload = function () {
    //获取id为btn的按钮
    var btn = document.getElementById("btn");
    //为按钮绑定一个单击响应函数
    btn.onclick = function () {
      alert("hello");
    };
  };

4、DOM的获取

1.getElementById()

通过id属性获取一个元素节点对象，参数：id是大小写敏感的字符串，返回的是一个元素对象

补充1：innerHTML 可读写，一方面可获取到元素内部的html代码，另一方面可以操作更改元素内容，包括标签，保留空格和换行，比较常用

补充2：innerText 可读写，它和innerHTMl类似，不同的是更改元素内容的时候，它会自动将html标签，空格和换行去除

补充3：console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法

2.getElementsByTagName()

根据标签名来获取一组元素节点对象

返回一个类数组(伪数组)对象，所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到伪数组中返回;如果页面中没有这个元素，则会返回一个空的伪数组；

获取某个元素（父元素）内部所有指定标签名的元素

element.getElementsByTagName('标签名')

3.getElementsByName()

通过name属性获取一组元素节点对象

补充2： innerHTML用于获取元素内部的HTML内容的，对于自结束标签，这个属性没有意义

补充3：如果需要读取元素节点属性，语法：元素.属性名，

例如：元素.id ；元素.name ；元素.src ;元素.href等

表单属性：type、value、checked、selected、disabled等

注意：class属性不能采用这种方式，读取class属性时需要使用元素.className

value值：就是输入文本框中的内容，要修改value值 element.value = "～～";

4.getElementsByClassName()

通过class属性获取一组元素节点对象（不支持IE8及以下浏览器）

5.childNodes、children

返回父元素下的所有子节点

（1）、childNodes属性会获取包括文本节点在内的所有节点，DOM标准，标签间的空白也会被当成文本节点

（2）、children属性可以获取当前元素的所有子元素，不包括空白文档了

6.firstChild、firstElementChild

返回父元素下的第一个子节点

（1）、firstChild 第一个子节点(包括空白的文本节点)

（2）、firstElementChild 获取当前元素的第一个子元素

7.parentNode

返回某元素的父节点

8.返回某元素的前/后一个兄弟节点

（1）、 previousSibling [ˈpriːviəs] ['sibliŋ] 返回前一个兄弟节点也有可能获取到空白的文本

（2）、 previousElementSibling 返回前一个兄弟元素，不包括空白文本，注意：不支持ie8及以下的浏览器

（3）、 nextSibling返回下一个兄弟节点也有可能获取到空白的文本

（4）、 nextElementSibling 返回下一个兄弟元素，不包括空白文本，注意：不支持ie8及以下的浏览器

9.获取body标签

//方法一

var body=document.getElementsByTagName("body")[0];

//方法二

var body = document.body

10.获取html根标签

var html = document.documentElement;

11.获取页面中所有的元素

//第一种方式

var all=document.all;

//第二种方式

var all = document.getElementsByTagName("*")

12.document.querySelector()

-需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象

-该方法总会返回唯一的元素，如果满足条件的元素是多个，那么它只会返回第一个

-IE8以上的都适用

13.document.querySelectorAll()

-该方法和qureySelector()用法类似，不同的是它将会将符合条件的所有元素封装到一个伪数组中返回

-即使符合条件的元素只有一个，它也会返回数组

var div = document.querySelector(".box1 div")

var div = document.querySelector(".box1")

var div=document.querySelectorAll(".box1")