【Javascript】Javascript------文档对象模型

最新推荐文章于 2024-02-12 00:15:00 发布

qq_47746614

最新推荐文章于 2024-02-12 00:15:00 发布

阅读量62

点赞数 1

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_47746614/article/details/132397128

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Javascript------文档对象模型（一）

Javascript 中var与let的区别？
DOM（Document Object Model------文档对象模型）
- DOM 节点
DOM对象（重要）
获取DOM对象
操作元素内容
操作元素属性
自定义属性

Javascript 中var与let的区别？

作用域：使用 var 关键字声明的变量存在函数作用域或全局作用域中，而使用 let 关键字声明的变量存在块级作用域中（例如，for 循环、if 语句块）。块级作用域是指变量只在其声明的块内部可见，外部无法访问。
变量提升：使用 var 声明的变量存在变量提升的现象，即变量可以在声明之前被访问并返回 undefined。而使用 let 声明的变量不会发生变量提升，在声明之前访问该变量会抛出一个引用错误。
重复声明：在同一个作用域内，可以使用 var 多次声明同一个变量，而后面的声明会覆盖前面的声明。但是使用 let 在同一个作用域内重复声明同一个变量会导致语法错误。
全局对象绑定：使用 var 声明的全局变量会成为全局对象（在浏览器环境中为 window）的属性，可以通过全局对象访问。而使用 let 声明的全局变量不会成为全局对象的属性，无法通过全局对象访问。

综上所述，let 具有块级作用域、不存在变量提升和不允许重复声明的特性，更加推荐在现代 JavaScript 代码中使用 let
来声明变量。然而，由于 var 在许多旧代码中广泛使用，仍然需要了解和考虑其行为。

DOM（Document Object Model------文档对象模型）

1、DOM（Document Object Model------文档对象模型）是将整个 HTML 文档的每一个标签元素视为一个对象，这个对象下包含了许多的属性和方法，通过操作这些属性或者调用这些方法实现对 HTML 的动态更新，为实现网页特效以及用户交互提供技术支撑。
2、简言之 DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。
3、将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系。
在这里插入图片描述

DOM 节点

节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。
1、【元素节点】其实就是 HTML 标签，如上图中 head、div、body 等都属于元素节点。
2、【属性节点】是指 HTML 标签中的属性，如上图中 a 标签的 href 属性、div 标签的 class 属性。
3、【文本节点】是指 HTML 标签的文字内容，如 title 标签中的文字。
4、【根节点】特指 html 标签。

DOM对象（重要）

1、DOM对象：浏览器根据html标签生成的 JS对象

所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

2、DOM的核心思想

把网页内容当做对象来处理

3、document 对象

是 DOM 里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的

document.write()

网页所有内容都在document里面
document 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，document 是学习 DOM 的核心。

<script>
  // document 是内置的对象
  // console.log(typeof document);

  // 1. 通过 document 获取根节点
  console.log(document.documentElement); // 对应 html 标签

  // 2. 通过 document 节取 body 节点
  console.log(document.body); // 对应 body 标签

  // 3. 通过 document.write 方法向网页输出内容
  document.write('Hello World!');
</script>

获取DOM对象

1.querySelector 满足条件的第一个元素

语法：document.querySelector(‘css选择器’)

里面写css选择器

必须是字符串，也就是必须加引号

参数：包含一个或多个有效的CSS选择器字符串
返回值：

CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。

2.querySelectorAll 满足条件的元素集合返回伪数组

语法： document.querySelectorAll(‘css选择器’)
参数: 包含一个或多个有效的CSS选择器字符串
返回值: CSS选择器匹配的NodeList 对象集合

例如：
document.querySelector('ul  li')			获取全部li  标签

得到的是一个伪数组：就算是一个元素也是伪数组

有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得

3.了解其他方式

document.getElementById 根据ID获取标签
document.getElementsByTagName 根据标签名获取标签，返回伪数组
document.getElementsByClassName 根据class获取标签，返回伪数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM - 查找节点</title>
</head>
<body>
  <h3>查找元素类型节点</h3>
  <p>从整个 DOM 树中查找 DOM 节点是学习 DOM 的第一个步骤。</p>
  <ul>
      <li>元素</li>
      <li>元素</li>
      <li>元素</li>
      <li>元素</li>
  </ul>
  <script>
  	const p = document.querySelector('p')  // 获取第一个p元素
  	const lis = document.querySelectorAll('li')  // 获取第一个p元素
  </script>
</body>
</html>

操作元素内容

元素innerText 属性
将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

<script>
  // innerText 将文本内容添加/更新到任意标签位置
  const intro = document.querySelector('.intro')
  // intro.innerText = '嗨~ 我叫李雷！'
  // intro.innerText = '<h4>嗨~ 我叫李雷！</h4>'
</script>

元素.innerHTML 属性
将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符

<script>
  // innerHTML 将文本内容添加/更新到任意标签位置
  const intro = document.querySelector('.intro')
  intro.innerHTML = '嗨~ 我叫韩梅梅！'
  intro.innerHTML = '<h4>嗨~ 我叫韩梅梅！</h4>'
</script>

操作元素属性

操作元素常用属性

还可以通过 JS 设置/修改标签元素属性，比如通过 src更换图片
最常见的属性比如： href、title、src 等
语法：对象.属性=值

<script>
  // 1. 获取 img 对应的 DOM 元素
  const pic = document.querySelector('.pic')
	// 2. 修改属性
  pic.src = './images/lion.webp'
  pic.width = 400;
  pic.alt = '图片不见了...'
</script>

操作元素样式属性

1、通过 style 属性操作CSS

语法：

对象.style.样式属性=值

注意：
修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
斜体样式赋值的时候，需要的时候不要忘记加css单位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.intro')
    box.style.color = 'red'
    box.style.width = '300px'
    // css 属性的 - 连接符与 JavaScript 的 减运算符
    // 冲突，所以要改成驼峰法
    box.style.backgroundColor = 'pink'
  </script>
</body>
</html>

2、操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法：

元素.className=’active’ //active是个类名

注意：
1. 由于class是关键字, 所以使用className去代替
2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
3. 通过 classList 操作类控制CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
    <style>
        .pink {
            background: pink;
            color: hotpink;
        }
    </style>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.intro')
    box.className = 'pink'
  </script>
</body>
</html>

3.通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：

元素.classList.add(‘类名’)//追加一个类
元素.classList.remove(‘类名’)//删除一个类
元素.classList.toggle(‘类名’)//切换一个类

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .active {
            width: 300px;
            height: 300px;
            background-color: hotpink;
            margin-left: 100px;
        }
    </style>
</head>

<body>

    <div class="one"></div>
    <script>
        // 1.获取元素
        // let box = document.querySelector('css选择器')
        let box = document.querySelector('div')
        // add是个方法 添加  追加
        // box.classList.add('active')
        // remove() 移除 类
        // box.classList.remove('one')
        // 切换类
        box.classList.toggle('one')
    </script>
</body>

</html>

使用 className 和classList的区别？

修改大量样式的更方便
修改不多样式的时候方便
classList 是追加和删除不影响以前类名

操作表单元素属性

1、表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
2、正常的有属性有取值的跟其他的标签属性没有任何区别

获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <input type="text" value="请输入">
    <button disabled>按钮</button>
    <input type="checkbox" name="" id="" class="agree">
    <script>
        // 1. 获取元素
        let input = document.querySelector('input')
        // 2. 取值或者设置值  得到input里面的值可以用 value
        // console.log(input.value)
        input.value = '小米手机'
        input.type = 'password'

        // 2. 启用按钮
        let btn = document.querySelector('button')
        // disabled 不可用   =  false  这样可以让按钮启用
        btn.disabled = false
        // 3. 勾选复选框
        let checkbox = document.querySelector('.agree')
        checkbox.checked = false
    </script>
</body>

</html>

3、表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性
比如： disabled、checked、selected

（1）、disabled 属性用于禁用一个元素，使其变为不可编辑或不可点击状态。它可以应用于大多数表单元素（如文本框、按钮、下拉列表等）以及一些其他元素（如 <fieldset> 块元素）。要使用 disabled 属性，可以通过以下方式设置或获取它的值：

// 设置禁用状态
element.disabled = true;

// 取消禁用状态
element.disabled = false;

// 获取禁用状态
var isDisabled = element.disabled;

（2）、checked 属性用于选中复选框或单选按钮。它可以设置或获取一个元素是否被选中。要使用 checked 属性，可以按照以下方式操作：

// 设置选中状态
element.checked = true;

// 取消选中状态
element.checked = false;

// 获取选中状态
var isChecked = element.checked;

（3）、 selected 属性用于选择下拉列表或选择框中的选项。它可以设置或获取选项是否被选中。要使用 selected 属性，可以按照以下方式操作：

// 设置选中状态
element.selected = true;

// 取消选中状态
element.selected = false;

// 获取选中状态
var isSelected = element.selected;

自定义属性

标准属性: 标签天生自带的属性比如class id title等, 可以直接使用点语法操作
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
   <div data-id="1"> 自定义属性 </div>
    <script>
        // 1. 获取元素
        let div = document.querySelector('div')
        // 2. 获取自定义属性值
         console.log(div.dataset.id)
      
    </script>
</body>

</html>

qq_47746614

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【Javascript】Javascript------文档对象模型

标准属性: 标签天生自带的属性比如class id title等, 可以直接使用点语法操作自定义属性：在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取。
复制链接

扫一扫