JavaScript之核心（十）--- JavaScriptDOM细化

最新推荐文章于 2024-07-26 11:09:07 发布

不放弃每一天

最新推荐文章于 2024-07-26 11:09:07 发布

阅读量239

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44680403/article/details/105277075

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

DOM 是整个 Javascript 甚至整个前端最最核心的内容

11.1 什么是 DOM？

（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
DOM 是 Document Object Model（文档对象模型）的缩写。

文档对象模型 (DOM) 可以将 web 页面 和 脚本编程语言 连接起来

web 页面
这里的 web 页面，也就是之前我们用 HTML 和 CSS 绘制的页面，也称作为
脚本或编程语言
为什么这里不直接说将 Web 页面和 Javascript 语言连接起来，而要绕一下说脚本或编程语言？

11. 2 访问DOM

DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树，也称为DOM树

选择器的查询：querySelector() 只能获取body中第一个符合元素的节点

document.querySelector('main .core .subtitle');

迭代查询：
当我们得到 subtitle 元素后，我们还可以利用这个元素，继续筛选器内部元素，
比如我们想筛选器内部的 a 标签，我们可以继续完善代码：

let subtitle = document.querySelector('main .core .subtitle');
console.log(subtitle.querySelector('a'));

选择器的查询：querySelectorAll() 获取body中所有符合元素的节点

document.querySelectorAll('input');
返回的是一个类数组，可以通过索来进行访问

getElementById() 	返回带有指定 ID 的元素。
getElementsByTagName() 	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 	返回包含带有指定类名的所有元素的节点列表。

11. 3 DOM的属性

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>优课达</title>
</head>
<body>
  <div id="test">优课达</div>
  <script src="./index.js"></script>
</body>

let divDom = document.querySelector('div#test');//元素节点
console.log(divDom.nodeType, divDom.nodeName, divDom.nodeValue);

// 获取DIV节点的第一个儿子节点，代表 '优课达' 这个字符串
let txtDom = divDom.firstChild;//文本节点
console.log(txtDom.nodeType, txtDom.nodeName, txtDom.nodeValue);

// 获取DIV节点的id属性
let attDom = divDom.attributes.id;//特性节点，也就是获取元素节点里面的属性值
console.log(attDom.nodeType, attDom.nodeName, attDom.nodeValue);

总结：
nodeType值：

元素类型 	NodeType
元素 			1
属性 			2
文本 			3
注释 			8
文档 			9

属性节点的 nodeName 与属性名相同
文本节点的 nodeValue获取文本内容

11. 4 DOM的内容

let divDom = document.querySelector('div#test');

outerHTML：获取节点里面的子节点和所有的内容，包括自身节点
innerHTML：获取节点里面的所有的内部节点内容，不包括自身节点
innerText：获取节点里面内部纯文本内容

11. 4 DOM的亲属

document.querySelector('div#test').firstChild;
//<div id="test">优课达<p>youkeda</p><p>学的比别人好一点</p></div>	
获取的是整个 DOM 的 HTML 代码

lastChild 
//优课达<p>youkeda</p><p>学的比别人好一点</p>
DOM 内部 HTML 代码

childNodes
//优课达
DOM 内部纯文本内容

11. 5 DOM的操作

创建节点，添加节点

document.createElement(tagName)
document.createTextNode(string)
 
const div = document.createElement('div');
const txt = document.createTextNode('好棒呦');

div.appendChild(txt);
document.body.appendChild(div);

removeChild() 	删除子节点。
replaceChild() 	替换子节点。

appendChild() 	把新的子节点添加到指定节点。
insertBefore() 	在指定的子节点前面插入新的子节点。

createAttribute() 	创建属性节点。
createElement() 	创建元素节点。
createTextNode() 	创建文本节点。

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

设置节点的样式和属性

img.setAttribute('style', 'width: 100%; height: 100%;');
dom.style.color = 'xxxx';

清空节点里面的内容

innerHTML = ''    清空节点所有的后代内容。

实践作业：

做一个钟表：通过new Date();获取实时时间然后通过css3的定位和旋转实现钟表效果
在这里插入图片描述

不放弃每一天

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之核心（十）--- JavaScriptDOM细化

DOM 是整个 Javascript 甚至整个前端最最核心的内容11.1 什么是 DOM？（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM 是 Document Object Model（文档对象模型）的缩写。文档对象模型 (DOM) 可以将 web 页面和脚本编程语言连接起来web 页面这里的 web 页面，也就...
复制链接

扫一扫

专栏目录