DOM

最新推荐文章于 2022-07-04 20:19:44 发布

有机弄蛙

最新推荐文章于 2022-07-04 20:19:44 发布

阅读量114

点赞数

分类专栏：大一下笔记文章标签： js

本文链接：https://blog.csdn.net/weixin_51226264/article/details/117172436

版权

笔记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

大一下

10 篇文章 0 订阅

订阅专栏

DOM

API
DOM

DOM树
DOM元素
DOM节点
DOM事件
DOM操作

API

在上这节课之前，我就在pink老师的素材库里看见了一个叫做API的东西，在学习之后我知道了：

API是一些预先定义的接口，或指软件系统不同组成部分衔接的约定。用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节。
WebAPI 是一种用来开发系统间接口、设备接口 API 的技术，基于 Http 协议，请求和返回格式结果默认是 json 格式。比 WCF 更简单、更通用，比 WebService 更节省流量、更简洁。
其包含了广泛的功能，Web 应用通过API接口，可以实现存储服务、消息服务、计算服务等能力，利用这些能力可以进而开发出强大功能的web应用。
DOM也是它的一种

DOM

什么是DOM呢？

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。

什么是HTML DOM捏？

1）文档：一个页面就是一个文档，在DOM中使用document表示
2）元素：页面中的所有标签都是元素，DOM中使用element表示
3）节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。

DOM树

在这里插入图片描述

如上就是DOM树，具体的元素与标签的表示方式见上面的引用

DOM元素

关于元素，需要注意的是元素的获取、创建、删除与替换

一、元素的获取

元素的获取可分为五种

1.用getElementByid()通过 id 查找 HTML 元素
<div id="aa">a</div>
<script>
var a = document.getElementByid('aa');
</script>`
2.用getElementsByTagName()通过标签名查找 HTML 元素
<script>
var x = document.getElementsByTagName("p");
</script>`
3.用getElementsByClassName()通过类名查找 HTML 元素
<script>
var x = document.getElementsByClassName("intro");
</script>`
4.用querySelectorAll()通过 CSS 选择器查找 HTML 元素
<script>
var x = document.querySelectorAll("p.intro");
</script>
5.获取特殊元素
（1）获取body元素：document.body
（2）获取HTML元素：document.documentElement

二、元素的创建

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");//新建一个P标签
var node=document.createTextNode("This is new.");//给P变迁以内容
para.appendChild(node);//给其一个节点

var element=document.getElementById("div1");
element.appendChild(para);//将新加的元素加入div1中
</script>

如需向 HTML DOM 添加新元素，必须创建该元素，然后把它追加到元素上。

三、元素的删除

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");//找父元素
var child=document.getElementById("p1");//找子元素
parent.removeChild(child);//删除父元素下的子元素
</script>

如果需要删除元素的话，需要其父元素与子元素

四、元素的替换

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>

用法与删除类似

DOM节点

节点树中的节点彼此拥有层级关系。

父子和同胞等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

如图
在这里插入图片描述
而关于节点的一些用法可见上面元素的创建删除与替换

DOM事件

一、事件三要素

（1）事件源：事件被触发的对象
（2）事件类型：如何触发（如鼠标点击、鼠标经过、按下键盘）什么事件
（3）事件处理程序：通过一个函数赋值的方式完成

二、执行事件的步骤

（1）获取事件源
（2）注册事件（绑定事件）
（3）添加事件处理程序（采取函数赋值方式）

关于事件常见的例子有

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

DOM操作

关于元素的操作，修改内容，样式和自定义这三种

一、修改内容

修改内容可分为三种

1.改变 HTML 输出流
JavaScript 能够创建动态 HTML 内容：
document.write() 可用于直接写入 HTML 输出流
<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>
2.改变 HTML 内容
修改 HTML 文档内容最简单的方法是，使用 element.innerText和element.innerHTML 属性。
element.Text可以改变从起始位置到终止位置的内容，但它去除HTML标签，同时空格和换行也会被去除。
element.innerHTML可以改变从起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行，这两个属性都是可读写的，可以获取元素里面的内容。
<script>
var p = document.querySelector('p);
console.log(p.innerText);
console.log(p.innerHTML);
p.disabled = true;//禁用元素
</script>`
3.改变表单
如果想要修改表单中的内容，innnerHTML 是不可以的，因为input中的值只能通过value来修改。
<script>
var input = document.querySelector('input');
input.value = '被点击了';
</script>`