2-44钟静雯_day06

最新推荐文章于 2022-01-18 11:52:43 发布

grey77

最新推荐文章于 2022-01-18 11:52:43 发布

阅读量270

点赞数

本文链接：https://blog.csdn.net/grey77/article/details/111878766

版权

Day06知识点总结
DOM
事件
JavaScript的三种引入方式
1.在标签内。

Document 1 2 3 4 5 6 7 8 2.引用外部JavaScript文件，在或标签。 Document

//day06.js
console.log(‘hello’)//控制台输出
1
2
3
4
5
6
7
8
9
3.在标签内。

//事件属性:元素的某一个属性中编写JavaScript程序或调用

test

1 2 3 4 5 6 7 8 9 DOM DOM基础 DOM(Document Object Model)，译为文档对象模型，是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准。

W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
在这里插入图片描述
DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
DOM节点类型说明

节点类型说明
Document 表示整个文档，DOM树的根节点。
DocumentFragment 表示文档碎片，仅包含部分文档。
DocumentType 为文档定义的实体提供接口。
Element 表示元素。
Attr 表示属性。
Text 表示元素或属性的文本内容。
Comment 表示注释。
使用nodeType属性可以判断一个节点的类型，数值说明如表。

nodeType属性返回值说明

节点类型 nodeType属性返回值
Element 1
Text 3
Document 9

Document // 判断Div元素是什么类型

test

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 DOM属性 Document

test

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 访问节点

DOM为Node类型定义如下属性，以方便JavaScript访问节点。

parentNode:返回当前节点的父节点。
childNodes:某个节点的所有的节点。
children:返回一个节点的所有元素节点。
firstChild:返回当前节点的第一个子节点。
lastChild:返回当前节点的最后一个子节点。
缺点：效率慢。

文档节点

使用document.body可以访问body元素。
使用document.images可以访问image对象。
使用document.anchors返回所有设置name属性的标签。
使用document.forms返回所有forms对象。
元素节点

通过id获取元素。
通过标记名获取元素。
通过类名获取元素。
通过选择器selector的方式获取元素。

Document

//列表id属性
Java
JavaScript
Python
C

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 设置元素属性

getAttribute()返回指定的属性值。
setAttribute()把指定属性设置或修改为指定的值。

Document //设置style属性

</div>
<script>
    //获取盒子
    const oBox = document.querySelector("#box1")
	//获取属性
    console.log(oBox.getAttribute('id'))
	//设置属性
    oBox.setAttribute('id','box2')
    //oBox.style.backgroundColor = 'salmon'
</script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 创建元素节点

createElement()方法能够根据参数指定的标签名称创建一个新的元素，并返回新建元素的引用。
createTextNode()方法可创建文本节点。

Document //创建元素，设置id

JavaScript
Java
Python
AI

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 事件用户和页面交互时发生的行为网页JavaScript程序使用异步事件驱动编程模型。 Document // 点击按钮在控制台输出消息

Press 1 Press 2 Press 3