DOM之获取元素

2020-12-07 本文已影响0人 amanohina

API简介

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节
JavaScript有自己的一套API
API的特征输入和输出（I/O）
比如：

var  max =   Math.max(2,3,4);

API的使用方法（console.log("abc")）

Web API的概念

浏览器提供了一套操作浏览器功能和页面元素的 API(BOM 和 DOM)
目前为止Web API特指浏览器提供的API（一组方法），Web API在后面的课程中有其他的含义
应当使用MDN辅助学习

BOM（浏览器对象模型）

browser object model，一套操作浏览器功能的API
通过 BOM 可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。

DOM（文档对象模型）

document object model，一套操作页面元素的 API。
DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作。

DOM的概念

W3C组织推荐的处理可扩展标记语言的标准编程接口。是一种与平台和语言无关的应用程序接口（API），它可以动态地访问程序和脚本，更新其内容，结构和WWW文档的风格（目前，HTML和XML文档是通过说明部分定义的）。文档可以进一步被处理，处理的结果可以加入到当前的页面，DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

DOM树

DOM经常进行的操作

获取元素
对元素进行操作（设置属性和或者调用其方法）
动态创建元素
事件（什么时机做相应的操作）

DOM获取页面元素

想要操作页面上的某部分（显示/隐藏，或者添加动画等），需要先获取到该部分对应的元素，才进行后续操作

根据id获取元素

方法：调用document对象的getElementById方法
参数：字符串类型的id的属性值
返回值：对应id名的元素对象
注意：
1.由于id名有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用
2.代码执行顺序，如果js在html结构之前，会导致结构未加载，不能获取id的元素

<body>
  <p id="para">text0</p>
  <p id="para">text1</p>
  <p id="box">text2</p>
  <p>text3</p>
  <p>text4</p>
  <script>
    // 根据 id 获取元素
    var para = document.getElementById("para");
    // 打印para
    console.log(para);
    // 打印para是什么类型的数据
    console.log(typeof para);
    // 补充：在控制台打印具体的对象
    console.dir(para);
    // 修改para内行内的样式
    para.style.background = "pink";
    // 代码书写顺序：js 中获取元素时，必须保证元素已经在浏览器中渲染成功
    // 需要将 js 的代码写在 html 结构之后
    // box.style.background = "blue"; 不推荐直接使用 id 名
  </script>
</body>

另外：JS中通过元素的id获取的方式，只会认准第一个获取的元素，另外都不会去获取，所以代码中不要有重复的id

根据标签名获取元素

方法：调用document对象的getElementByTagName方法
参数：同名的元素对象组成的数组
返回值：同名的元素对象组成的数组
注意：
1.操作数据时需要按照操作数组的方法进行
2.getElementByTagName 方法内部获取的元素是动态增加的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 提前获取元素
    var divs = document.getElementsByTagName("div");
    console.log(divs);
  </script>
</head>
<body>
  <p>text1</p>
  <p>text2</p>
  <p>text3</p>
  <p>text4</p>
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
  <div>
    <p>text5</p>
  </div>
  <script>
    console.log(divs);
    // 通过标签名获取元素
    var ps = document.getElementsByTagName("p");
    console.log(ps);
    // HTMLCollection  html 元素组成的集合 伪数组
    // 操作室需要按照操作数组的方法进行
    // 遍历数组
    for (var i = 0 ; i <= ps.length - 1; i++) {
      // 输出每一项
      console.log(ps[i]);
    }
    ps[0].style.background = "pink";
  </script>
</body>
</html>

元素对象内部获取标签元素

获取的元素对象内部，本身也可以调用根据标签获取元素方法，例如 div对象也可以调用getElementsByTagName 方法。
目的：缩小选择元素的范围，类似 css 中的后代选择器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box1 p {
      color: red;
    }
  </style>
</head>
<body>
  <div id="box1">
    <p>text1 of box1</p>
    <p>text2 of box1</p>
    <p>text3 of box1</p>
    <p>text4 of box1</p>
  </div>
  <div id="box2">
    <p>text1 of box2</p>
    <p>text2 of box2</p>
    <p>text3 of box2</p>
    <p>text4 of box2</p>
  </div>
  <script>
    // 元素对象内部可以继续打点调用通过标签名获取元素的方法
    // 类似于 css 中 后代选择器，缩小选择范围
    var box1 = document.getElementById("box1");
    // 我们习惯将连续调用方式拆开书写
    var ps1 = box1.getElementsByTagName("p");
    console.log(ps1);
  </script>
</body>
</html>

根据name获取元素

方法：调用 document 对象的 getElementsByName 方法。
参数：字符串类型的 name 属性值。
返回值：name 属性值相同的元素对象组成的数组。
不建议使用：在 IE 和 Opera 中有兼容问题，会多选中 id 属性值相同的元素。

<body>
  <form>
    <input type="radio" name="age">0~10<br>
    <input type="radio" name="age">11~20<br>
    <input type="radio" name="age">20~30<br>
  </form>
  <div id="age">年龄</div>
  <script>
    // 通过标签的 name 属性获取元素
    var ages = document.getElementsByName("age");
    // NodeList  节点列表集合  类数组
    console.log(ages);
    // 兼容问题：在 IE 和 Opera中 有兼容问题，会多选中 id 属性值相同的部分
  </script>
</body>

根据类名获取元素

方法：调用 document 对象的 getElementsByClassName 方法。
参数：字符串类型的 class 属性值。
返回值：class 属性值相同的元素对象组成的数组。
浏览器兼容问题：不支持 IE8 及以下的浏览器
也是支持动态添加的

根据选择器获取元素

方法1：调用 document 对象的 querySelector 方法，通过 css 中的选择器去选取第一个符合条件的标签元素。
方法2：调用 document 对象的 querySelectorAll 方法，通过 css 中的选择器去选取所有符合条件的标签元素。
参数：字符串类型的 css 中的选择器。
浏览器兼容问题：不支持 IE8 以下的浏览器
不能在加载html结构之前进行书写，要放在后面,不支持动态增加

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>  
  <script>
    // // 在结构之前使用 选择器 选取方法
    // var para = document.querySelector("#box1 .para");
    // console.log(para);

    // 选择所有符合条件的元素
    // var paras = document.querySelectorAll("#box1 .para");
    // console.log(paras);
  </script>
</head>
<body>
  <div id="box1">
    <p>text1 of box1</p>
    <p class="para">text2 of box1</p>
    <p class="para">text3 of box1</p>
    <p>text4 of box1</p>
  </div>
  <div id="box2">
    <p>text1 of box2</p>
    <p class="para">text2 of box2</p>
    <p class="para">text3 of box2</p>
    <p>text4 of box2</p>
  </div>
  <script>
    // 在结构之后使用 选择器 选取方法
    var para = document.querySelector("#box1 .para");
    console.log(para);
    var paras = document.querySelectorAll("#box1 .para");
    console.log(paras);
    // 兼容问题：在 IE8 以下不能使用
  </script>
</body>
</html>

DOM之获取元素

API简介

Web API的概念

BOM（浏览器对象模型）

DOM（文档对象模型）

DOM的概念

DOM树

DOM经常进行的操作

DOM获取页面元素

根据id获取元素

根据标签名获取元素

元素对象内部获取标签元素

根据name获取元素

根据类名获取元素

根据选择器获取元素

总结：

猜你喜欢

热点阅读