JavaScript-Web APIDOM获取元素事件操作元素

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript-Web APIDOM获取元素事件操作元素相关的知识，希望对你有一定的参考价值。

1. Web API简介

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

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

在这里插入图片描述

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

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

DOM的三大元素：

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

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   -->返回值是一个集合（对象集合）

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

document.getElementsByName('name属性值')

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

document.getElementsByClassName('class属性值')

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

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