学习前端第四十一天（节点属性，特性和属性）

一、节点属性

1、nodeType属性，获取 DOM 节点类型

对于元素节点 elem.nodeType == 1，

对于文本节点 elem.nodeType == 3，

对于注释节点 elem.nodeType == 8，

对于 document 对象 elem.nodeType == 9，

2、nodeName和tagName，节点名称，标签名称

tagName仅适用于元素节点，显示元素节点的标签名

nodeName适用于所有Node，对于元素，它的意义与 tagName 相同。对于其他节点类型（text，comment 等），它拥有一个对应节点类型的字符串。

<body><!-- hello --><div id="box">hello div</div><script>// nodeName，tagName。节点名称，标签名称const nodes = document.body.childNodes;console.log(nodes[0].nodeName)  // #textconsole.log(nodes[1].nodeName)  // #commentconsole.log(nodes[2].nodeName)  // #textconsole.log(nodes[3].nodeName)  // DIVconsole.log(nodes[1].tagName)   // undefinedconsole.log(nodes[2].tagName)   // undefinedconsole.log(nodes[3].tagName)   // DIV</script>
</body>

3、innerHTML，outerHTML 

innerHTMl  获得且可以修改元素节点中的内容，可以添加标签

outerHTML 获得且可以修改整个标签和标签内的元素，可以修改

两者都可以显示元素节点的内容，并且可以解析其中的标签；区别在于是否可以对元素节点的最外层标签进行访问和修改

<body><div id="box">hello div <em>emm</em></div><script>// outerHTML 获得整个标签和标签内的元素，可以修改const divEL = document.getElementById("box");console.log(divEL.innerHTML);  // hello div <em>emm</em>console.log(divEL.outerHTML);  // <div id="box">hello div <em>emm</em></div>divEL.outerHTML = "<p>div标签直接被<b>替代</b></p>"// 在检查时会有体现</script>
</body>

4、 textContent，同innerText

提供了对元素内的文本的访问权限，仅文本，去掉所有 <tags>。 

与innerHTMl不同：

1.使用innerHTMl会展示元素节点内的标签，使用textContent不会展示元素节点内的标签；

2.在使用两者对元素节点进行修改时，innerHTMl会作为 HTML插入，解析标签并在代码层面实现该标签，textContent“作为文本”插入，所有符号均按字面意义处理

所以对纯文本处理使用textContent比较安全

<body><div id="box">hello div <em>emm</em></div><script>const divEL = document.getElementById("box");console.log("innerHTML:", divEL.innerHTML);      // innerHTML: hello div <em>emm</em>    console.log("textContent:", divEL.textContent);  // textContent: hello div emm     console.log("innerText:", divEL.innerText);      // innerText: hello div emm // divEL.textContent = "<em>emm</em>"; // 保留标签</script>
</body>

5、 nodeValue/data：文本节点内容，两者几乎相同 

 文本节点，具有它们的对应项：nodeValue 和 data 属性。

<body><!-- hello comment--><script>//  nodeValue/data：文本节点内容，两者几乎相同const comment = document.body.childNodes[1]console.log(comment.nodeValue); // hello commentconsole.log(comment.data); // hello commentsetTimeout(() => {comment.data = "hello data"console.log(comment.nodeValue); // hello dataconsole.log(comment.data); // hello data}, 2000);</script>
</body>

6、hidden  true/false 指定元素是否可见

 先消失后显示

<body><div id="box">hello div <em>emm</em></div><script>// hidden  true/false 指定元素是否可见const divEL = document.getElementById("box");divEL.hidden = true;setTimeout(() => {divEL.hidden = false;}, 3000);</script>
</body>

二、特性和属性

1、元素节点类似对象，有属性

可以用常规方法添加新的属性和方法

document.body.myData = { name: 'Caesar', title: 'Imperator' };

document.body.sayTagName = function() { alert(this.tagName); };

还可以修改原型，给每个都加上想要的属性        

HTMLElement.prototype.username = "div"

HTMLElement.prototype.say = function () { console.log(this.username) }

属性区别大小写

2、HTML特性

有标准特性和非标准特性

标准特性会生成DOM属性，非标准特性不会

以下方法可以访问特性

  • elem.hasAttribute(name) —— 检查特性是否存在。
  • elem.getAttribute(name) —— 获取这个特性值。
  • elem.setAttribute(name, value) —— 设置这个特性值。
  • elem.removeAttribute(name) —— 移除这个特性。
<body><!-- 特性，标准特性，非标准特性 --><!-- 标准特性必定在属性中有一样的，标准特性和属性同步 --><input id="input" type=" text" name="username" age="20" value="xc"><script>const input = document.getElementById("input");console.log(input.id);     // input 标准特性console.log(input.type);   // text 标准特性console.log(input.age);    // undefined 非标准特性// 获得且修改特性，判断某个特性是否存在，标准特性修改对界面有影响console.log(input.getAttribute("id"))console.log(input.getAttribute("age"))console.log(input.hasAttribute("age"))console.log(input.hasAttribute("dw"))setTimeout(() => {input.removeAttribute("age"); // 移除非标准特性对页面无影响input.setAttribute("value", "xxx"); // 修改或移除标准特性对页面有影响}, 3000);</script>
</body>

3、属性特性同步

 修改与页面有关的标准特性/属性，页面会发生变化

<body><input id="input" type=" text" name="username" age="20" value="xc"><script>const input = document.getElementById("input");// 属性和标准特性同步setTimeout(() => {input.value = "dwd";  // 修改与页面有关的属性，页面会发生变化}, 2000);setTimeout(() => {input.type = "checkbox";  // 修改与页面有关的属性，页面会发生变化console.log(input.getAttribute("value"))  // dwdconsole.log(input.getAttribute("type"))  // checkbox}, 4000);</script>
</body>

4、属性设置更方便，类型多样，优先属性设置

        setTimeout(() => {input.type = "checkbox"}, 2000);setTimeout(() => {input.setAttribute("type", "radio");console.log(input.type)}, 5000);setTimeout(() => {input.setAttribute("id", "xc");console.log(input.id)console.log(input.getAttribute("id"))}, 10000);// 因为有的特性改变后属性不一定变，所以规定属性设置用属性获取，特性设置用特性获取

5、特性获取的是字符串，属性获取的是对象类型

使用属性获取更容易进行修改等操作

<body><input id="input" type="text" style="font-Size:50px ;color: yellow"><script>// 特性获取的是字符串，属性获取的是对象类型const input = document.getElementById("input");  // font-Size:50px ;color: yellowconsole.log(input.getAttribute("style"));  // { }console.log(input.style);// 使用属性获取更容易进行修改等操作console.log(input.style.fontSize);console.log(input.style.color);input.style.color = "blue";</script>
</body>

6、非标准特性，dataset

 所有以data为前缀的特性，都会放在一个对象dataset中，访问时无需加前缀

像 data-order-state 这样的多词特性可以以驼峰式进行调用：dataset.orderState。

<body><!-- // 非标准特性，加前缀 --><!-- 所有以data为前缀的特性，都会放在一个对象dataset中，访问时无需加前缀 --><input id="input" type="text" data-age="19" data-min-height="170" style="font-Size:50px ;color: yellow"><script>const input = document.getElementById("input");console.log(input.dataset);console.log(input.dataset.age);// 设置dataset对象内容input.dataset.today = "Wes";console.log(input.dataset.today)console.log(input.dataset.minHeight)</script>
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/843401.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

NLP技术发展和相关书籍分享

NLP技术发展和相关书籍分享

自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是计算机科学领域和人工智能领域的重要研究方向之一&#xff0c;旨在探索实现人与计算机之间用自然语言进行有效交流的理论与方法。它融合了语言学、计算机科学、机器学习、数学、认知心理学等…
阅读更多...
C++中的异常处理

C++中的异常处理

文章目录 前言一、异常处理的代码实现二、异常规范总结 前言 异常处理是一种在软件开发中用于处理程序运行时错误的机制。在C中&#xff0c;异常处理的基本思想是将异常情况与正常情况进行区分&#xff0c;当异常情况发生时&#xff0c;程序不会继续执行下去&#xff0c;而是转…
阅读更多...
外卖系统源码解读：校园外卖APP开发全攻略

外卖系统源码解读：校园外卖APP开发全攻略

外卖系统源码解读&#xff1a;校园外卖APP开发全攻略 今天&#xff0c;小编将深入解读外卖系统的源码&#xff0c;详细介绍如何开发一款功能齐全的校园外卖APP&#xff0c;帮助开发者快速上手&#xff0c;打造出高质量的外卖应用。 一、需求分析 应具备以下基本功能&#xff…
阅读更多...
idea的project structure下project [lauguage ]()level 没有java的sdk17选项如何导入

idea的project structure下project [lauguage ]()level 没有java的sdk17选项如何导入

idea的project structure下project lauguage level 没有java的sdk17选项如何导入 别导入了&#xff0c;需要升级idea版本。idea中没有project language level没有17如何添加 - CSDN文库 别听这文章瞎扯淡 2021版本就是没有&#xff0c;直接卸载升级到最新版本就可以了。没办法…
阅读更多...
关系型数据库的三范式理解

关系型数据库的三范式理解

关系型数据库的三范式&#xff08;Third Normal Form&#xff0c;3NF&#xff09;是数据库设计中的一种规范化理论&#xff0c;用于减少数据冗余和提高数据一致性。三范式是建立在第一范式&#xff08;1NF&#xff09;和第二范式&#xff08;2NF&#xff09;的基础上的。以下是…
阅读更多...
MySQL之创建高性能的索引(四)

MySQL之创建高性能的索引(四)

创建高性能的索引 空间数据索引(R-Tree) MyISAM表支持空间索引&#xff0c;可以用作地理数据存储。和B-Tree索引不同&#xff0c;这类索引无须前缀查询。空间索引会从所有维度来索引数据。查询时&#xff0c;可以有效地使用任意维度来组合查询。必须使用MySQL的GIS相关函数如…
阅读更多...
AcWing 2568：树链剖分 ← 线段树+DFS

AcWing 2568：树链剖分 ← 线段树+DFS

【题目来源】https://www.acwing.com/problem/content/2570/【题目描述】 给定一棵树&#xff0c;树中包含 n 个节点&#xff08;编号 1∼n&#xff09;&#xff0c;其中第 i 个节点的权值为 ai。 初始时&#xff0c;1 号节点为树的根节点。 现在要对该树进行 m 次操作&#xf…
阅读更多...
5.28总结

5.28总结

HTML 三剑客&#xff1a; JS CSS HTML 入门实例 新建一个test.html文件&#xff0c;内容如下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wi…
阅读更多...
央视网视频下载和花屏问题处理

央视网视频下载和花屏问题处理

央视网(www.cctv.com)视频下载往往是花屏的&#xff0c;如何处理呢&#xff1f; 如果您是IT技术开发者&#xff0c;那么您可以通过下面步骤自己实现。 用chrome浏览器&#xff0c;F2打开开发者工具&#xff0c;找到当前页面的network 然后找一个接口&#xff1a;https://vdn.a…
阅读更多...
【Python-基础】字典合集

【Python-基础】字典合集

遍历所有键 # vis_params{vis_level: -1, line_thickness: 500} for key in vis_params.keys():注&#xff1a; vis_params &#xff1a; 字典数据 未完待续…
阅读更多...
Android UI：ViewTree: 监听

Android UI：ViewTree: 监听

文章目录 涉及设计模式 ​​​​​​​​​​​​​​观察者模式+策略模式API源码分析总结涉及设计模式 观察者模式+策略模式 被观察者：ViewTree ViewTree持有一个观察器ViewTreeObserver 系统在ViewRootImpl和View的相关方法中调用ViewTreeObserver上的注册的监听器的方法，…
阅读更多...
文生图模型演进：AE、VAE、VQ-VAE、VQ-GAN、DALL-E 等 8 模型

文生图模型演进：AE、VAE、VQ-VAE、VQ-GAN、DALL-E 等 8 模型

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…
阅读更多...
OC IOS 文件解压缩预览

OC IOS 文件解压缩预览

热很。。热很。。。。夏天的城市只有热浪没有情怀。。。 来吧&#xff0c;come on。。。 引用第三方库&#xff1a; pod SSZipArchive 开发实现&#xff1a; 一、控制器实现 头文件控制器定义&#xff1a; // // ZipRarViewController.h // // Created by carbonzhao on 2…
阅读更多...
JavaScript与版本控制：编译时光机的双重奏——git仓库

JavaScript与版本控制：编译时光机的双重奏——git仓库

JavaScript与版本控制&#xff1a;编译时光机的双重奏——git仓库 JavaScript&#xff1a;代码的魔法棒版本控制&#xff1a;时光机的钥匙案例一&#xff1a;初始化Git仓库与基本操作初始化仓库添加文件至暂存区提交更改分支管理 案例二&#xff1a;JavaScript项目中的Gitignor…
阅读更多...
OTFS系统建模、通信性能分析、信道估计、模糊函数【附MATLAB代码】

OTFS系统建模、通信性能分析、信道估计、模糊函数【附MATLAB代码】

文献来源&#xff1a;​微信公众号&#xff1a;EW Frontier OTFS简介 OTFS信道估计 % Clear command window, workspace variables, and close all figures clc; clear all; close all; ​ % Define Eb values in dB EbdB -10:2:10; ​ % Convert Eb values from dB to lin…
阅读更多...
【测评】香橙派 AIpro上手初体验

【测评】香橙派 AIpro上手初体验

AI毋庸置疑是近年来&#xff0c;热度最高的技术之一&#xff0c;作为一名工程师拥抱新技术的同时不可或缺的需要一块强悍的开发板&#xff0c;香橙派 AIpro除了拥有好看的皮囊之外&#xff0c;还拥有一个有趣且充满魅力的灵魂。作为一位长期活跃在嵌入式开发领域的工程师&#…
阅读更多...
OrangePi AIpro (8T)使用体验，性能测试报告

OrangePi AIpro (8T)使用体验，性能测试报告

前言 这段时间收到了CSDN和香橙派的邀请&#xff0c;对OrangePi AIpro进行体验测评&#xff0c;在此感谢CSDN对我的信任&#xff0c;也感谢香橙派能做出如此优秀的开发板。 可喜可贺&#xff0c;周三晚上我收到了官方寄出的OrangePi AIpro。出于对国产芯片的好奇&#xff0c…
阅读更多...
二分答案思想下的二进制问题

二分答案思想下的二进制问题

序列合并 题目描述 给定一个长度为 n n n 的非负整数序列 { a n } \{a_n\} {an​}&#xff0c;你可以进行 k k k 次操作&#xff0c;每次操作你选择两个相邻的数&#xff0c;把它们合并成它们的按位或。 形式化地&#xff0c;一次操作中&#xff0c;你选择一个下标 i i …
阅读更多...
前端 webSocket配置代理

前端 webSocket配置代理

vue, react. nginx 配置反向代理&#xff0c;解决跨域问题 前端请求 如果配置了 wss 协议&#xff0c; 可以将ws 替换为 wss 这里和我们通常使用的方式不同websocket 需要传入完整的地址&#xff0c;然后才能去做代理 let url ${location.protocol https ? wss : ws}://$…
阅读更多...
李廉洋：5.29黄金原油持续震荡，今日美盘行情走势分析及策略。

李廉洋：5.29黄金原油持续震荡，今日美盘行情走势分析及策略。

黄金消息面分析&#xff1a;美联储理事鲍曼周二表示&#xff0c;她支持要么先等等再开始放缓缩减资产负债表&#xff0c;要么采取比本月早些时候宣布的更温和的放慢缩表进程。鲍曼认为商业银行准备金水平仍然充足&#xff0c;这让官员们有更多时间来推进缩表进程。“在准备金接…
阅读更多...
最新文章

Copyright @ 2022~2023