JavaScript-Web API、DOM、获取元素、事件、操作元素和自定义属性

最新推荐文章于 2022-05-08 10:00:20 发布

Sco_Jing1031

最新推荐文章于 2022-05-08 10:00:20 发布

阅读量395

点赞数 7

分类专栏： JavaScript 文章标签： javascript api 事件处理机制 dom 前端

本文链接：https://blog.csdn.net/m0_47109503/article/details/117566963

版权

JavaScript 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

文章目录

1. Web API简介
2. DOM
3. 获取文档中的元素
4. document对象的属性
5. 事件
6. 事件的类型
7. 操作元素
8. 排他操作（算法）
9. 属性操作和自定义属性
- H5自定义属性

1. Web API简介

JavaScript的组成部分：
在这里插入图片描述
API：应用程序接口，已经编译好的一种函数，帮助开发者实现某种功能，无需理解内部工作机制细节，只需要知道如何使用
在解决问题的过程中，先去看有没有可以帮助解决的API，如果有，率先直接使用
例：

document.title = '设置新标题'
console.log(document.title)    //将结果写到终端中去
document.write('<h1>网页内容</h1>')  //将结果写到页面中去

在这里插入图片描述

2. DOM

（Document Object Model）：文档对象模型，是w3c（国际社会上专门指定web语言标准的组织）制定的一套针对HTML和XML的标准的编程接口

把HTML文档处理成树形结构（倒立的树），将一个HTML文档看作是一棵树，文档中的标签、标签的属性、标签的内容都是这棵树的节点
DOM树：
在这里插入图片描述
强调：
DOM的最顶端是——document；
BOM的最顶端是——windows

DOM的三大元素：

文档（document）：可以把一个页面当成一个文档
元素（element）：文档（页面）中的所有标签
节点（node）：网页中的所有内容在文档树中都是节点（如：元素节点、属性节点、文本节点、注释节点等）。在DOM中，每个节点都是对象，都有自己的属性和方法（函数）

3. 获取文档中的元素

根据id获取

document.getElementById('id号')

如果没有找到则返回空,如果存在多个相同的id则返回undefined(故标签的id属性不能重复）

<div id = 'box'>你好</div>
<script>
    var Obox = document.getElementById('box')
    console.log(Obox)    //结果为：<div id = 'box'>你好
</script>

根据标签名获取

document.getElementsByTagName   -->返回值是一个集合（对象集合）

集合可以通过索引来访问集合中的元素，但是集合不是一个数组（伪数组）

根据name属性获取元素

document.getElementsByName('name属性值')

一般获取的是表单元素，不要求name属性值唯一，一般用于获取表单中的单选框和复选框

根据class类名获取元素

document.getElementsByClassName('class属性值')

根据选择器获取

querySelector('选择器')：获取指定选择器的元素，一次只能找到一个元素，多个选择器元素相同，只返回第一个元素
querySelectorAll('选择器')：一次可以返回多个元素，返回的是元素的集合

4. document对象的属性

方法	作用
document.body	返回文档的body元素
document.title	返回文档的title元素，表示页面的标题
document.documentElement	返回文档的html元素，即HTML页面的全部信息（通过此可以将文档全部元素放进一个字符串，供别人读取分析
document.froms	返回对文档中所有From对象引用，复数形式，可以返回多个表单
document.images	返回对文档中所有的image对象，与上述一样

5. 事件

用户进行的某种操作（可以被JavaScript侦测到的行为），是一种“触发–响应”机制，是实现页面交互的方式

事件源：谁触发了事件
事件类型：触发了什么事件（如单击事件、鼠标事件）
事件处理程序：事件被触发后所执行的代码（函数形式）
事件名 = 函数名（[参数]）
注：创建按钮的方式（复习）

6. 事件的类型

JS事件：
在这里插入图片描述

7. 操作元素

操作元素的内容

在这里插入图片描述

操作元素的属性

在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性

元素中：src、href等
表单中：id、alt、title等

操作元素的样式

①操作style属性：元素对象.style.样式属性名

样式属性名对应CSS样式名，但需要去掉CSS样式名里的半字线“-”，并将半字线后面的英文的首字母大写

方法	作用
background	设置或返回元素的背景属性
backgroundColor	设置或返回元素的背景色
display	设置或返回元素的显示类型
fontSize	设置或返回元素的字体大小
height	设置或返回元素的高度
left	设置或返回定位元素的左部位置
listStyleType	设置或返回列表项标记的类型
overflow	设置或返回如何处理呈现在元素框外面的内容
textAlign	设置或返回文本的水平对齐方式
textDecoration	设置或返回文本的修饰
textIndent	设置或返回文本第一行的缩进
transform	向元素应用2D或3D转换

<body>
    <div id="box"></div>
    <script>
        var ele = document.querySelector('#box'); // 获取元素对象
        ele.style.backgroundColor= 'red';
        ele.style.width = '100px';
        ele.style.height = '100px';
        ele.style.transform = 'rotate(7deg)';
    </script>
    <!-- 上述3行代码相当于在CSS中添加以下样式： -->
    <style>
        #box {
            background-color: red;
            width: 100px;
            height: 100px;
            transform: rotate(7deg);
        }
    </style>
</body>

②操作className属性：元素对象.className

在开发中，如果样式修改较多，可以采取操作类名的方式更改元素样式
访问className属性的值表示获取元素的类名，为className属性赋值表示更改元素类名
className会更改元素的类名，会覆盖原先的类名
如果元素有多个类名，在className中以空格分隔

8. 排他操作（算法）

在这里插入图片描述

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button')
// btns得到的是伪数组，里面的每一个元素都用的是btns[i]
for (var i = 0; i < btns.length; i++) {
	btns[i].onclick = function () {
	// (1)先把所有按钮的背景颜色去掉
	for (var i = 0; i < btns.length; i++) {
		btns[i].style.backgroundColor = ''
	}
	// （2）然后再让当前的元素的背景颜色改变
	this.style.backgroundColor = 'pink'
	}
}
// 2.首先先排除其他人，然后才设置自己的样式——排他思想

如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

9. 属性操作和自定义属性

方法	作用	区别
element.属性	获取属性值	获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’)	获取属性值	主要获得自定义的属性（标准）---->程序员自定义的属性
element.属性 = ‘值’	设置属性值	设置内置属性值。
element.setAttribute(‘属性’, ‘值’);	设置属性值	主要设置自定义的属性（标准）
element.removeAttribute(‘属性’);	移除属性

示例：

//设置属性值
<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    div.id = 'test';                        // 设置id值为test
    div.className = 'navs';        // 设置class类名为navs
    div.setAttribute('index', 2);  // 设置属性名为index，值为2
  </script>
</body>

//移除属性
<body>
  <div id="test" class="footer" index="2"></div>
  <script>
    var div = document.querySelector('div');   
    div.removeAttribute('id');        // 移除div元素的id属性
    div.removeAttribute('class');   // 移除div元素的class属性                        
    div.removeAttribute('index'); // 移除div元素的index属性
  </script>
</body>

H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
故H5新增了自定义属性：

设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。
比如 <div data-index=“1”></div>
或者使用 JS 设置
element.setAttribute(‘data-index’, 2)
获取H5自定义属性
兼容性获取 element.getAttribute(‘data-index’);
H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持

Sco_Jing1031

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
8
评论
JavaScript-Web API、DOM、获取元素、事件、操作元素和自定义属性

文章目录1. Web API简介2. DOM3. 获取文档中的元素3.1 根据id获取3.2 根据标签名获取3.3 根据name属性获取元素3.4 根据class类名获取元素根据选择器获取4. document对象的属性5. 事件6. 事件的类型7. 操作元素内容8. 操作元素的属性1. Web API简介JavaScript的组成部分：API：应用程序接口，已经编译好的一种函数，帮助开发者实现某种功能，无需理解内部工作机制细节，只需要知道如何使用在解决问题的过程中，先去看有没有可以帮助解决的AP
复制链接

扫一扫

专栏目录