WebAPI之DOM_dom selector href 开头-CSDN博客

本文链接：https://blog.csdn.net/hzg_hou/article/details/130294569

本文介绍了WebAPI的概念，包括DOM和BOM在网页功能实现中的作用。DOM将HTML页面转化为可操作的对象模型，而BOM处理浏览器相关功能。通过`document.querySelector`和`document.querySelectorAll`等方法可以获取和操作DOM对象，包括标签属性、样式以及内容的修改。此外，文章还涉及了通过ID、标签名和类名获取DOM对象的方法。

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

webAPI分为DOM阶段和BOM阶段
使用webAPI的目标：能够自己独立的完成一个网站页面的所有功能的实现

webAPI:
a) web：网站
b)API:是一个接口（是一系列具体功能的实现）
c) webAPI: 用来实现整个网站所有功能的一个具体的实现
总结: 浏览器提供了用操作网页功能的一组接口(功能)

A: DOM: document Object Model (文档对象模型)
将整个html页面封装成了一个对象
DOM本质就是通过对象的方式进行操作网页
结论: 将整个网页封装为 document 对象

B: BOM: 浏览器对象模型

C: DOM树: 作用是用对象的方式描述网页中标签之间的关系

D:DOM对象:
1. 文档对象
2. 整个网页 —> 被封装为一个对象(document对象)
- - ->网页是由各种html标签组成的 - - -> 网页中的每一个标签是不是一个对象? 网页中的每一个标签都是一个对象

获取DOM对象

获取DOM对象/获取网页中的标签
a) 语法: document.querySelector(‘css选择器’);
b) 返回值: 有返回值,返回的结果是一个对象
c) 注意事项:
css选择器是支持所有的选择器: 类选择器 id选择器标签选择器伪类选择器 …

console.log() 获取到的标签结果是一个标签形式的对象
console.dir() 直接以键值对对象的方式展示

//语法说明
document.querySelector('div')
document.querySelector('.one');
document.querySelector('#two');
document.querySelector('body #two');
document.querySelector('body > #two');

document.querySelectorAll(‘css选择器’); 获取所有满足条件的标签
结论:
1. 如果希望获取页面中多个标签的时候不能使用 querySelector() 方式
2. querySelector() 方式只能获取所有满足条件中的第一个
3. querySelectorAll() 返回的结果是一个伪数组 (张的像数组,但是不能使用数组中所有的方法)
4. querySelectorAll() 返回的结果是一个伪数组,该伪数组中的每一个值都是一个DOM对象
document.getElementById(‘id值’); // 通过id找标签
// 返回值: 返回的就是一个DOM对象

<div id="one" class="two">1</div>
 <div id="one"  class="two">2</div>

document.getElementById('one')

document.getElementsByTagName(‘标签名’);
返回值: 返回的结果是一个伪数组, 数组中保存的每一个值都是一个DOM对象

document.getElementsByTagName('div')

document.getElementsByClassName(‘类名’) 通过标签类名找DOM对象,不是类选择器
返回值: 返回的结果是一个伪数组, 数组中保存的每一个值都是一个DOM对象

document.getElementsByClassName('two')

操作标签中的属性（样式）

img标签

a) 获取图片标签的路径: DOM对象.src
b) 注意: 得到的图片路径是绝对路径
在这里插入图片描述
c) 给图片标签设置路径: DOM对象.src = 路径;

 var img = document.querySelector('img');
    img.src = './images/2.jpg';
    // img.src = '路径';

操作a标签

a) 获取a标签的href路径: DOM对象.href
b) 设置a标签的href路径: DOM对象.href = ‘路径’;
c) 设置a标签的alt：DOM对象.alt = ‘文字’;

 具体实现:
        var a = document.querySelector('a');
        a.href = 'https://jd.com';

获取标签中的文字内容

A. 表单标签:
a) 先获取表单标签中的内容: DOM对象.value
b) 给表单标签设置文字内容: DOM对象.value = 值;

var int = document.querySelector('input');
        // console.log(int.value);
        int.value = '我是老侯';

B.非表单标签:
先获取当前对应的标签(DOM对象)
DOM对象.innerHTML
DOM对象.innerText

区别:
a) innerHTML: 获取到的内容不光有文字,还包含其他的html元素(标签), 回车换行
b) innerText: 获取到的结果就是纯文本

给非表单元素设置内容:
a) DOM对象.innerHTML = 值;
b) DOM对象.innerText = 值;
区别:
a) innerText 设置内容的时候,只会按照普通文字进行显示
b) innerHTML 设置内容,如果设置的内容包含标签,则会将标签渲染为对应的html标签

操作标签的样式

A、方式一
通过js操作标签的样式: 通过行内 + 通过类进行样式的操作
语法: DOM对象.style.css属性 = 值;
注意:
1. DOM对象.style 本身也是一个对象,所以可以继续在 style后面写点
2. style.css属性, css属性不一定是css中的写法,可以先将该对象打印出来,然后参看
3. css属性如果是一个带有 ‘-’ 属性则在js中是按照小驼峰命名法设置的

// 代码演示:
        var div = document.querySelector('div');
        console.dir(div);
        div.style.color = 'red';
        div.style.backgroundColor = 'green';

B、方式二
DOM对象.className = ‘类名’;
总结:
1. DOM对象.className 可以给标签添加类名,但是会将标签身上原来的类名覆盖
2. DOM对象.className 可以设置多个类名,类名之间使用空格隔开

     var div = document.querySelector('div');
     div.className = 'box bg bd br';

C、方式三
语法:
1. DOM对象.classList.add(‘类名’)
给标签添加类名
添加类名的时候不会覆盖标签原来的类名,因为通过调用方法实现的
add() 方法可以同时设置多个类名,使用逗号隔
2. DOM对象.classList.remove(‘类名’) 移除标签身上的类名
3. DOM对象.classList.toggle(‘类名’) 给标签切换类名
切换类似于开关
如果标签有类名则切换的时候要删除
如果标签没有类名则切换的时候要添加
4. DOM对象.classList.contains(‘类名’); 判断当前标签是否包含指定的类名
判断当前标签是否包含类名
有返回值,返回的结果是一个布尔值,true代表包含, false代表不包含

  // 代码演示
    var div = document.querySelector('div');
    div.classList.add('bg', 'bd');
    div.classList.remove('box', 'bd', 'br');
    div.classList.toggle('bd');
    div.classList.contains('box');