js学习-9（DOM）

最新推荐文章于 2024-05-14 20:58:30 发布

琦遇前端ing~

最新推荐文章于 2024-05-14 20:58:30 发布

阅读量278

点赞数

分类专栏：前端学习文章标签： js javascript 前端 dom

本文链接：https://blog.csdn.net/qq_42760119/article/details/107475264

版权

一、DOM（Document object Model文档对象模型）**DOM：**文档对象模型（Document object Model），操作网页上元素的API。比如盒子移动、变色、轮播图等。**ECMAscript：**javascript的语法标准。包括一些基本语法，比如：变量、表达式、函数、运算符、函数、if语句、for语句等。**BOM：**浏览器对象模型（Browser object Model），操作浏览器部分功能的API。比如：让浏览器自动滚动。这三部分是javascr

摘要由CSDN通过智能技术生成

一、DOM（Document object Model文档对象模型）

**DOM：**文档对象模型（Document object Model），操作网页上元素的API。比如盒子移动、变色、轮播图等。

ECMAscript： javascript的语法标准。包括一些基本语法，比如：变量、表达式、函数、运算符、函数、if语句、for语句等。

**BOM：**浏览器对象模型（Browser object Model），操作浏览器部分功能的API。比如：让浏览器自动滚动。

这三部分是javascript基础的重要组成部分。

DOM

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。在Html中，一切都是节点，在dom树的数据结构中也是可以很清楚的看到的。整个html就是一个文档节点，所有节点都是object。

**解析过程：**HTML加载完成后，渲染引擎会在内存中把HTML文档生成一个DOM树，getElemenById是获取DOM上的元素节点，然后操作的时候修改的是该元素的属性。

DOM树的数据结构：
在这里插入图片描述

节点：

节点是构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点。

节点的具体类行是不同的，常见的节点主要分为四类：

文档节点（文档）：整个html文档就是一个节点。
元素节点（标签）：html标签就是元素节点。
属性节点（属性）：元素的属性。
文本节点（文本）：html标签中的文本内容。（包括标签之间的空格、换行）

节点的类型不同，属性和方法也就不同。但是所有的节点都是object。

Dom可以做什么？

找对象（元素节点）
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应：事件源、事件、事件的驱动程序

二、元素节点的获取

DOM节点的获取方式就是获取事件源的方式。

ES5之前的获取对象的方式：

获取DOM节点的三种方式：

//方式一：通过id获取。由于id名是唯一的，所以获取的是一个元素节点。
var div1 = document.getElementById("box1");

//方式二：通过class名获取。由于clss名不是唯一的，所以获取的是一组元素节点，以数组形式返回。
var arr1 = document.getElementsByClassName("class_Name");

//方式三：通过标签名获取。由于标签名不是唯一的，所以获取的是一组元素节点，以数组形式返回。
var arr1 = document.getElementsByTagName("tag_Name");

注：方式二和三获取的都是数组，所以需要先遍历之后再使用。

特殊情况：即使方式二和三获取的数组中值只有一个，那它也被封装在数组里的。该值的获取方式：

document.getElementsByTagName("tag_Name")[0];    //取数组中的第一个元素
document.getElementsByClassName("Class_Name")[0];  //取数组中的第一个元素

ES5之后的元素的获取方式：（推荐使用下面的方法）

1、document.querySelector(“选择器”)：返回的是最先匹配的第一个对象

例如：

<body>
  <h1>hello  world1</h1>
  <h1>hello  world2</h1>
  <h1 id = "abc">hello  world3</h1>
  <h1 class = "asd">hello world4</h1>
  <h1 class = "asd">hello world5</h1>
  
  <script type="text/javascript">
   //document.querySelector()返回最先匹配的第一个对象
            var asd1 = document.querySelector('.asd')  //获取第一个类名是asd的元素对象
   var asd2 = document.querySelector('.asd:nth-child(4)')
   console.log(asd1);
   console.log(asd2);
   
   var abc = document.querySelector("#abc");  //参数是选择器的名称，和css书写方式一样
   console.log(abc);
   
   var abc1 = document.getElementById("abc");
   console.log(abc1);
   //通过document.querySelector()和 document.getElementById（）获取的对象是一样的
   console.log(abc === abc1)  //输出结果是true
   
  </script>

2、doument.querySelectorAll (“选择器”) 获取所有匹配的元素对象。

var asd = document.querySelectorAll(".asd");   //获取所有类名是asd的元素对象

三、DOM访问关系的获取

DOM的节点之间并不是相互孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

节点的访问关系是以属性的方式存在的。

在这里插入图片描述

获取父节点：

调

最低0.47元/天解锁文章

琦遇前端ing~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js学习-9（DOM）

一、DOM（Document object Model文档对象模型）**DOM：**文档对象模型（Document object Model），操作网页上元素的API。比如盒子移动、变色、轮播图等。**ECMAscript：**javascript的语法标准。包括一些基本语法，比如：变量、表达式、函数、运算符、函数、if语句、for语句等。**BOM：**浏览器对象模型（Browser object Model），操作浏览器部分功能的API。比如：让浏览器自动滚动。这三部分是javascr
复制链接

扫一扫

专栏目录