【第六周前端预习---DOM】

最新推荐文章于 2022-07-07 16:22:41 发布

哒咩摆烂

最新推荐文章于 2022-07-07 16:22:41 发布

阅读量235

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_62021245/article/details/125435077

版权

第六周、前端预习--DOM

一、DOM简介
二、获取元素
三、事件
四、文档
- - 1.HTML DOM Document 对象
  - 2.DOM增删改查
五、节点

一、DOM简介

1.什么是 DOM？

DOM 是一项 W3C (World Wide Web Consortium) 标准。

DOM 定义了访问文档的标准： “W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

2.什么是HTML DOM

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

3.DOM树

HTML DOM 模型被结构化为对象树：
在这里插入图片描述

二、获取元素

1.根据id获取元素

var a = document.getElementById("id名");

由于id 名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。
代码执行顺序，如果js 在 html结构之前，会导致结构未加载，不能获取对应id的元素。

2.根据标签名获取元素

var divs = document.getElementsByTagName("标签名");

操作数据时需要按照操作数组的方法进行
getElementsByTagName方法内部获取的元素是动态增加的

3.根据name属性获取元素

var ages = document.getElementsByName("name名称");

4.根据选择器获取元素

querySelector()方法括号中的值是元素的选择器，此方法直接返回DOM对象本身。

var p = document.querySelector('选择器');

querySelector()和querySelectorAll()方法括号中的取值都是选择器，但两个方法是有区别的。当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class的元素，而querySelectorAll()获取到了所有class相等的元素集合。

var ps = document.querySelectorAll('选择器');

5.根据class属性获取元素

参数是字符串class属性值，返回值是一个相同属性值的集合数组

var paras = div.getElementsByClassName("类名");

三、事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应

常用事件：

onclick 通过鼠标点击来触发事件
onmouseover 鼠标被移到某元素上
onmouseout 鼠标移开某元素
onfocus 元素获得焦点
onchange 当输入域的内容改变并失去焦点后发生
onload 页面或图像加载完成后立即发生
onblur 元素失去焦点
onkeyup 在键盘按键被松开时发生
onsubmit 表单提交事件

四、文档

HTML DOM 文档对象是您的网页中所有其他对象的拥有者

1.HTML DOM Document 对象

文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

2.DOM增删改查

增、删：

document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流
改：
element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式
查：
document.anchors 返回拥有 name 属性的所有元素
document.applets 返回所有元素（HTML5 不建议使用）
document.baseURI 返回文档的绝对基准 URI
document.body 返回元素
document.cookie 返回文档的 cookie
document.doctype 返回文档的 doctype
document.documentElement 返回元素
document.documentMode 返回浏览器使用的模式
document.documentURI 返回文档的 URI
document.domain 返回文档服务器的域名
document.domConfig 废弃。返回 DOM 配置
document.embeds 返回所有元素
document.forms 返回所有元素
document.head 返回元素
document.images 返回所有元素

五、节点

加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构，DOM将这种树型结构理解为由节点组成，组成一个节点树

1.节点类型

节点类型	HTML内容
文档节点	文档本身
属性节点	HTML元素内的属性
注释节点	注释节点
元素节点	所有的HTML元素
文本节点	元素的文本

2.节点获取

名称	描述
getElementById()	获取带有指定id的节点
getElementsByTagName()	获取带有指定标签名的节点集合
querySelector()	获取指定选择器或选择器组匹配的第一个节点
querySelectorAll()	获取指定选择器或选择器组匹配的所有节点集合，获取结果为节点集合，集合索引从0开始，依次增加