Web API—DOM（一）

最新推荐文章于 2022-06-07 10:49:22 发布

小北@爱学习

最新推荐文章于 2022-06-07 10:49:22 发布

阅读量141

点赞数

分类专栏：网课笔记文章标签： javascript css html html5 es6

本文链接：https://blog.csdn.net/qq_43352105/article/details/113547258

版权

网课笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

DOM-Web API

API概念

API（application programming interfance）应用程序编程接口，预先定义的函数，提供应用程序与开发人员得以访问一组例程的能力，而无需访问源码或理解内部机制
- 任何开发语言都有自己的API
- API关注点在于输入参数和输出

Web API概念

浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
特指浏览器提供的一组方法，掌握其API调用方式

DOM

文档对象模型（document object model），一套操作页面元素的API，可以将HTML看做是文档树，可以通过DOM提供的API对树上的节点进行操作
一种与平台和语言无关的应用程序接口，能够动态的访问程序和脚本，更新其内容、结构和www文档的风格
DOM树，一个网页可以称为文档，网页中的所有内容(标签、属性、文本、注释)都可以作为节点

在这里插入图片描述

DOM操作—获取元素

根据id获取

 // 通过id获取元素
var para = document.getElementById("para");
//代码书写顺序，js中获取元素时，必须保证元素已经在浏览器中渲染成功，所以就需要将js代码写在html结构之后
console.log(typeof para); //object
// 在控制台打印具体的对象,就可以看到具有的方法
console.dir(para); // p# para

调用document对象的getElementById方法
参数是字符串类型的id的属性值，返回对应id名的元素对象
console.dir(para)可以看到该对象具有的方法
js通过id获取，如果存在两个相等的id，那么只会选取第一个元素，id应保持唯一性

根据标签名获取

// 通过标签名获取
var vs = document.getElementsByTagName("p");
console.log(vs); //HTMLCollection(4) [p, p, p, p]伪数组
// 伪数组可以当作数组进行遍历操作
for (var i = 0; i < vs.length; i++) {
            console.log(vs[i]);
}

调用document对象的getElementsByTagName方法
参数：字符串类型的标签名，返回值是同名元素对象组成的数组
内部数据是同态添加的，所以定义在body前面就是一个空数组，但后面可以进行自己增加数组元素
在对标签数组进行操作的时候，必须通过数组a[]方法进行操作，不然会报错
不管是在外面还是嵌套在里面都可以获取到

对象内部打点调用

// 连续方法,类似于后代选择器缩小选择范围
var box1 = document.getElementById("box1").getElementsByTagName("p");

先通过id方法获取，然后再通过打点对标签名进行获取

根据name属性获取

// 通过标签的name属性获取元素
var dv = document.getElementsByName("dv");
console.log(dv); 
//NodeList(4) [div, div, div, div]节点列表集合 类数组

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

根据class属性获取

// 通过classname的属性
var paras = document.getElementsByClassName("dv");
console.log(paras);
//HTMLCollection(4) [p.dv, p.dv, p.dv, p.dv]

调用document对象的getElementsByClassName方法
参数：字符串类型的class属性值，返回与class属性值相同的元素对象组成的数组
IE8以下浏览器不支持,也是动态更新数组存储值的

根据选择器获取

var para = document.querySelector("#box1 .para");
console.log(para); //只会返回一项找到的内容
var para = document.querySelectorAll("#box1 .para");
console.log(para); //NodeList(2) [p.para, p.para]

调用document对象的querySelector方法，通过css中的选择器去选取第一个符合条件的标签元素
调用document对象的querySelectorAll方法，通过css中的选择器去选取所以符合条件的标签元素
参数是字符串类型的css中的选择器,并且必须在结构加载结束后再使用

标签内部内容属性

innerHTML: "↵        这是一个div标签↵        <span>这是一个span标签↵        </span>↵    "
innerText: "这是一个div标签 这是一个span标签"

innerHTML
- 在获取标签内部内容时，如果包含标签，获取的内容会包含标签，也包括空白换行等
- 更改属性值时，有标签的字符串会按照HTML语法中的标签进行加载
innerText
- 在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，会去掉换行和缩进等空白
- 更改属性值时，有标签的字符串会按照普通的字符加载

DOM—添加事件

在什么时候做什么事，触发—响应的执行机制
绑定事件的三要素:
- 事件源：给谁绑定事件
- 事件类型：绑定什么类型的时间click单击
- 事件函数：事件发生后执行什么内容，写在函数内部

事件监听

JS解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只要触发对应的绑定事件，会立刻执行事件函数
常用鼠标事件类型
- onclick—单击触发
- ondblclick—双击触发
- onmousedown—按键按下触发
- onmouseup—按键放开触发
- onmousemove—在元素上移动触发
- onmouseover—移动到元素上触发
- onmouseout—移除元素边界触发

常用事件监听方法

绑定HTML元素属性

<input type="button" id="btn" value="点击查看惊喜" onclick="alert('点我干什么？')">;

绑定DOM对象属性

//第一步：获取input标签
var btn = document.getElementById("btn");
// 第二步：添加事件函数
btn.onclick = function() {
//事件被触发要做的事情  alert("点我干什么？");
}

非表单元素属性

// 获取事件
var link = document.getElementById("link");
var pic = document.getElementById("pic");
// 来获取调用对象的各个属性
console.log(link.href);
console.log(pic.className);class需要更改为className
// 更改属性值,一般不随意更改id属性值
pic.src = "P1-4 xc/images/activity_02.jpg";

属性href、title、id、src等，调用方法，元素对象打点调用属性名
给元素属性赋值，等号右侧的赋值时字符串格式
当部分的属性名和关键字冲突，就会更改写法 class->className,for->htmlFor,rowspan->rowSpan
对于我们想要新添加的class属性，我们可以将想添加的属性为className

this指针

this指针是一个不断变化的值，永远指向绑定的事件源本身

普通函数
- this指向的是一个window对象
构造函数object
- this指向的是生成的实例对象
对象的方法
- this指向的是对象本身
事件函数
- this指向的事件源

案例分析

//1、获取元素
var imagegallery = document.getElementById("imagegallery");
var link = document.getElementsByTagName("a");
var image = document.getElementById("images");
var des = document.getElementById("des");
//2、遍历数组，添加点击事件
for (var i = 0; i < link.length; i++) {
            link[i].onclick = function() {
// image.src = link[i].href;无效的对属性进行修改
// 3、更改需要替换的内容，this关键字指代的是触发事件的真正事件源
             image.src = this.href;
// 4、更改des内部的文字内容
             des.innerText = this.title;
// 5、取消a标签的跳转
                return false;
            };
}

for循环内部的添加的绑定事件，在触发时，所有的批量添加的事件已经成功，触发事件时都是在循环结束之后
批量绑定的事件的事件函数内部的变量i，是一个全局变量
函数的执行已经是循环结束后，结束后执行的i变量值是i跳出循环的值

表单元素属性

<input type="button" value="按钮" id="btn"><br>
    <input type="text" id="txt" disabled="disabled">
    <select id="list">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
    </select>
<script>
// 获取元素
        var btn = document.getElementById("btn");
        var txt = document.getElementById("txt");
        var list = document.getElementById("list");
        var option = list.getElementsByTagName("option");
// value属性
        console.log(btn.value); //按钮
        console.log(txt.type); //text
        console.log(list[0].value); //beijing
        console.log(list[0].innerText); //北京
// 表单元素特有的一些属性，属性名和属性值是一样的情况返回布尔值 
        console.log(txt.disabled); //true
        console.log(btn.disabled); //true
// 特殊更改disabled值使用布尔值
        btn.disabled = true;
</script>

value属性用于大部分表单元素的内容获取(option除外)
type可以获取input标签的类型(输入款或复选框等)
disabled禁用属性，checked复选框选中属性，selected下拉菜单选中属性。属性值只有一个时，最终会转化为布尔值

案例分析

window下也有一个全局变量name，所以如果我们也var了一个name就会报错，可以修改name属性名，也可以将name当作函数内部的局部变量使用

btn.onclick = function() {
// 具体的长度可以使用length属性来进行判断
if (username.value.length < 3 || username.value.length > 6) {
// 不成功的原因在于window下也有一个name，会发生冲突，所以我们要不将name当作一个局部变量， 要么就修改name的名字
username.className = "bg";
// 如果不满足条件就直接返回，不要往下再执行了
return;

如果已经不满足条件了，我们不希望程序继续执行，就可以使用return让其不再往下继续执行

btn.onclick = function() {
// 随机选择一个option
// 我们可以联想到使用Math.random来获取一个随机的数组下标
// Math.random()*6,然后向下取整floor就可以不包含6
var n = Math.floor(Math.random() * (ops.length));
// 对选中的数字下标的内容送到input默认，我们可以使用selected属性
ops[n].selected = true;
}

自定义属性

并不是系统自定义，是我们自己设置的属性
getAttribute(name)获取标签行内属性
setAttribute(name,value)设置标签行内属性

removeAttribute(name)移除标签行内属性

<div id="box" age="18" sex="male">小明</div>
<script>
// 获取元素
var box = document.getElementById("box");
//元素的自有属性可以直接获取到
console.log(box.id); //box
// 用户自定义的属性就无法直接获取到
console.log(box.getAttribute("age")); //18
// 设置自定义的属性
box.setAttribute("age", "20"); //20
box.setAttribute("city", "北京");
// 移除属性
box.removeAttribute("sex");
</script>

style样式属性

 // 获取元素
var btn = my$("box");
console.log(box.style); //得到一个样式对象组CSSStyleDeclaration{……}
console.log(box.style.width); //可以用打点来调用具体的样式
box.style.width = "200px"; //对行内样式进行修改
// style属性方式设置的样式显示在标签行内，外联和内联样式都是没办法获取到的
console.log(box.style.backgroundColor);//驼峰

在之前我们使用的className属性名来获取样式
通过style来操作样式，元素对象的style属性的值是一个行内样式组成对象，对象内部封装了所有的行内的样式属性以及属性值
元素的样式属性对象可以继续打点调用，获取或设置相关的行内样式属性
注意！如果使用的css属性名是复合属性的单一属性，需要更改为驼峰命名法
两种方法区别
```
// 通过类名属性进行样式添加
box.className = "bg";
// 通过style进行属性的添加
console.log(box.style.width);
box.style.width = "200px";
```
- 类名属性值一般都是用于修改多条css样式，提前将修改后的样式属性设置到一个类选择器中，批量修改css样式
- style样式属性操作，一般是单个样式进行设置时使用

案例分析

body对象的样式属性可以直接获取到

document.body.style.backgroundColor = "black";

样式只修改一部分，我们只需要添加一些，就可以把以前的样式也一起拿过来使用

// 添加鼠标移上和鼠标离开的事件函数
box.onmouseover = function() {
// 让变量进行显示,只需要更改display属性，其他的属性保持不变 er.className = "erweima show";
//也可以通过replace函数来替换我们想要修改的内容
er.className = er.className.replace("hide", "show");
};

当我们操作的对象是数组的时候，里面的事件源都使用this来添加，就可以随时指代事件源自己了

// 对每一个输入款添加点击事件
for (var i = 0; i < txts.length; i++) {
       txts[i].onfocus = function() {
// 排他思想，第一步让所有的都恢复默认
for (var j = 0; j < txts.length; j++) {                txts[j].style.backgroundColor = "";
 }
// 第二步给自己设置一个单独的样式
// this的优势就在于永远表示的是事件源
this.style.backgroundColor = "pink";
            }
        }

排他思想，排除其他，保留自己
将所有的项包含自己都设置为默认样式（排除其他）
然后再单独添加自己的属性（保留自己）

如果我们要修改定位的样式，就必须在样式组中添加position属性

box.style.position = "absolute";
box.style.left = "200px";
box.style.top = "200px";

使用别的方法实现排他效果，就是只改变自己样式，最后又变量中存储原来的样式给自己

// 定义一个全局的变量来存储列之前的颜色属性
var bef;
// 给单一的每一行添加鼠标移动高亮显示
trs[i].onmouseover = function() {
// 将原来的颜色给bef存储
bef = this.style.backgroundColor;
this.style.backgroundColor = "skyblue";
};
trs[i].onmouseout = function() {
// 鼠标移开变为原来的颜色
this.style.backgroundColor = bef;
};

对应控制思想:有两组数据中存储了相同个数的元素对象，一组对象的变化，就会引起另外一组的变化

  for (var i = 0; i < spans.length; i++) {
// 自定义一个属性值用来保存index
  spans[i].index = i;
  spans[i].onmouseover = function() {
// 使用排他思想添加样式
// 让每个子元素的样式都是空
 for (var j = 0; j < spans.length; j++) {
 spans[j].className = "";
 divs[j].className = "";
}
// 保留自己的部分
 this.className = "current";
//保留自己bd中的div
 divs[this.index].className = "current";
            };
}

实现的方法就是找两个数据中的共同点
对应控制中也会涉及到排他的操作
由于this中没有和index相关的属性，那么我们就去自定义一个属性，保留目前的index属性值

下篇内容更精彩~

小北@爱学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web API—DOM（一）

文章目录DOM-Web APIAPI概念Web API概念DOMDOM操作—获取元素根据id获取根据标签名获取根据name属性获取根据class属性获取根据选择器获取标签内部内容属性DOM—添加事件事件监听常用事件监听方法非表单元素属性this指针案例分析表单元素属性案例分析自定义属性style样式属性案例分析DOM-Web APIAPI概念API（application programming interfance）应用程序编程接口，预先定义的函数，提供应用程序与开发人员得以访问一组例程的能力，而
复制链接

扫一扫