JavaScript DOM属性和方法之element元素对象

在HTML DOM中，elment对象表示HTML与纳素，可以包含的节点类型有元素u节点、文本节点、注释节点。它们有响应的属性和方法，有很多都是我们之前用过的。

一、element对象属性

1、attributes

该属性返回标签元素的所有属性集合，也就是NamedNodeMap，这个属性比较好理解，返回的是所有标签元素的属性，并不是对象的属性，而是我们写在HTML代码中的标签属性，如id、name

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title>
</head>
<body>
<p id="content" name="text" class="p_text">我有很多属性点击按钮查看</p>
<button onclick="getAttr()">点击查看p标签的属性</button>
</body>
<script>function getAttr(){var pObj = document.getElementById('content');var attr = pObj.attributes;console.log(attr);}
</script>
</html>
2、childNodes

该属性返回元素节点的所有子节点集合，包括空白文本节点。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title>
</head>
<body>
<div id="content"><a href="https://www.zhishunet.com">知数SEO</a><p>专注建站优化8年</p><span>你身边的建站优化专家</span><p>生意在于流量</p>
</div>
<button onclick="getChild()">点击获取div所有的子节点</button>
</body>
<script>function getChild(){var divObj = document.getElementById('content');var child = divObj.childNodes;console.log(child);}
</script>
</html>
3、className

这个属性可以用来设置和获取标签元素的class属性值，在开发中经常会被用到，例如：通过点击按钮来改变某个模块的整体样式，类似夜间模式的切换等。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title><style>.font{font-size: 20px;}.color{color: red}.new_class{line-height: 50px;font-weight: bold;}</style>
</head>
<body>
<p id="content" class="font color">建站优化选知数SEO</p>
<button onclick="getClass()">获取classname</button>
<button onclick="setClass()">设置classname</button>
<button onclick="addClass()">添加classname</button>
</body>
<script>// 获取p标签元素对象var pObj = document.getElementById('content');// 获取classnamefunction getClass(){var classname = pObj.className;console.log(classname);}// 设置classnamefunction setClass(){pObj.className = 'new_class';getClass(); // 显示class}// 新添加clasnamefunction addClass(){pObj.className = pObj.className + ' ' + 'new_class';getClass();}
</script>
</html>
4、clientWidth、offsetWidth、scrollWidth等宽高属性
5、contentEditable

这个属性可以改变标签元素是否可以编辑的状态，它的值有两个：true表示可编辑，false表示不可编辑。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<p id="p1">这个p标签不可编辑，点击按钮后可编辑</p>
<p id="p2" contenteditable="true">这个p标签可编辑，点击按钮后不可编辑</p>
<button onclick="setEdit()">让p标签的文字可编辑</button>
<button onclick="setNoEdit()">让p标签的文字不可编辑</button>
</body>
<script>// 设置标签可编辑function setEdit(){var inputObj = document.getElementById('p1');inputObj.contentEditable = true;}function setNoEdit(){var inputObj = document.getElementById('p2');inputObj.contentEditable = false;}
</script>
</html>
6、dir

这个属性可以设置或者返回文本的方向，在一些特殊情况下会用到，在HTML标签元素中也有这个属性，它的值是rlf表示文本方向向右👉

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<div id="content" dir="rtl">一个懂建站优化的程序员，既懂建站又会优化</div>
<br>
<button onclick="getDir()">获取文本的方向</button>
<br>
<button onclick="setDir()">设置文本方向</button>
</body>
<script>// 获取div元素读喜庆var divobj = document.getElementById('content');// 显示文本的显示方向function getDir(){var dir = divobj.dir;console.log(dir);}// 设置文本的显示方向function setDir(){divobj.dir = 'ltl';}
</script>
</html>
7、firstChild 和 lastChild

前者用于获取元素节点的第一个子节点，后者用于获取元素节点的最后一个子节点。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<div id="content"><p>这是第一段文字</p><p>这是第二段文字</p><p>这是第三段文字</p></div>
<button onclick="getFirstChild()">获取第一个子节点</button>
<button onclick="getLastChild()">获取最后一个子节点</button>
</body>
<script>// 获取div元素读喜庆var divObj = document.getElementById('content');// 获取第一个子节点function getFirstChild(){var first = divObj.firstChild;console.log(first);}function getLastChild(){var last = divObj.lastChild;console.log(last);}
</script>
</html>
8、id
// 可以通过element.id 便捷的获取到元素的id值
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<div id="content"><p>这是第一段文字</p><p>这是第二段文字</p><p>这是第三段文字</p></div>
<button onclick="getFirstChild()">获取第一个子节点</button>
<button onclick="getLastChild()">获取最后一个子节点</button>
</body>
<script>// 获取div元素读喜庆var divObj = document.getElementById('content');console.log(divObj.id); // content
</script>
</html>
9、innerHTML 和 textContent

前者设置和获取标签元素的内容（包括HTML标签），后者只能设置和获取标签元素的文本的内容

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<div id="content" class="text">我是文本内容<p>我是p标签内容</p>
</div>
<button onclick="getHtml()">获取div的内容</button>
<br>
<button onclick="setHtml()">设置div的内容</button>
<br>
<button onclick="getText()">获取div的文本内容</button>
<br>
<button onclick="setText()">设置div的文本内容</button>
</body>
<script>// 获取div元素读喜庆var divObj = document.getElementById('content');// 获取元素标签内容function getHtml(){var id = divObj.innerHTML;console.log(id);}// 设置元素u标签内容function setHtml(){divObj.innerHTML = '我是新文本<a href="#">我是链接</a>'getHtml();}// 获取div的文本function getText(){var text = divObj.textContent;console.log(text);}// 设置div文本function setText(){divObj.textContent = '<p>新文本</p>'getText();}</script>
</html>
10、previousSibling 和 nextSibling

前者用于获取上一个兄弟节点
后者用于获取下一个兄弟节点

11、nodeName、nodeType、nodeValue

nodeName属性用于返回元素的名字
nodeType属性用于返回元素的类型
nodeValue属性用于设置和返回元素的值

11、style

这个属性可以设置和返回标签元素的style属性的值

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<div id="content" style="border:1px solid red"><p>建站优化专家-知数SEO</p><p>专注搜索引擎优化8年</p>
</div>
<button onclick="getStyle()">获取div的style</button>
<button onclick="setStyle()">设置div的style</button>
</body>
<script>var divObj = document.getElementById('content');function getStyle(){var style = divObj.style;console.log(style);}function setStyle(){divObj.style = "background:green";getStyle();}
</script>
</html>

二、element对象方法

1、appendChild()

该方法向元素添加新的子节点，作为最后一个子节点。
我们常见的瀑布流，新生成的元素节点就是通过这个方法追加到某个元素节点中的。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<div id="content"><p>建站优化专家-知数SEO</p><p>专注搜索引擎优化8年</p>
</div>
<button onclick="addChild()">添加新的子节点</button>
</body>
<script>function addChild(){var divObj = document.getElementById('content');var newP = document.createElement('p');newP.textContent = '选择优化找知数SEO';divObj.appendChild(newP);}
</script>
</html>
2、insertBefore()

该方法在已有的子节点之前插入新的子节点，不同于appendChild()方法直接在最后添加子节点，insertBefore()方法在某个确定的子节点前面添加节点，他有两个参数：

  • 参数1:是要添加进去的新节点
  • 参数2:目标节点

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<div id="content"><p>建站优化专家-知数SEO</p><p>专注搜索引擎优化8年</p></div>
<button onclick="insert()">添加新的子节点</button>
</body>
<script>function insert(){var divObj = document.getElementById('content');var newP = document.createElement('p');newP.textContent = '选择优化找知数SEO';divObj.insertBefore(newP,divObj.firstChild);}
</script>
</html>
3、cloneNode()

这个方法可以对一个标签元素进行克隆，它只有一个参数：true或false

  • true表示连同该元素的所有内容一起克隆
  • false表示仅仅克隆这个标签本身
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<div id="content"><p>活到老学到老</p></div>
<button onclick="clone()">克隆p标签</button>
</body>
<script>function clone(){var divObj = document.getElementById('content');var pObj = divObj.firstChild;var newP = pObj.cloneNode(true);divObj.appendChild(newP);}
</script>
</html>
4、getAttribute() 和 setAttribute()

getAttribute()方法可以获取到某个属性的值
setAttribute()方法可以修改或设置某个属性的值

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<div id="content" name="知数SEO">建站优化专家</div>
<button onclick="attribute()">获取和设置div的属性</button>
</body>
<script>function attribute(){var divObj = document.getElementById('content');console.log(divObj.getAttribute('name')); // 知数SEOdivObj.setAttribute('name','知数网络');  console.log(divObj.getAttribute('name'));  // 知数网络divObj.setAttribute('new','新添加属性');console.log(divObj.getAttribute('new'));  // 新添加属性}
</script>
</html>
5、getAttributeNode() 和 setAttributeNode()

这两个方法操作的属性节点

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<div id="content" name="知数SEO">建站优化专家</div>
<button onclick="attribute()">获取和设置div的属性</button>
</body>
<script>function attribute(){var divObj = document.getElementById('content');console.log(divObj.getAttributeNode('name')); // name = '知数SEO'var newObj = document.createAttribute('new');newObj.value = '这是新属性';divObj.setAttributeNode(newObj);console.log(divObj.getAttributeNode('new'));  // new='这是新属性'}
</script>
</html>
6、removeAttribute() 和 removeAttributeNode()

removeAttribute()方法可以直接删除某个属性
removeAttributeNode()方法则不可以，我们要先通过getAttributeNode()方法获取到某个属性节点，才能使用这个方法删除这个得到的属性节点，而且返回这个删除的属性节点。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<div id="content" name="知数SEO" age="8">知数SEO</div>
<button onclick="remove()">删除属性</button>
<button onclick="removeNode()">删除属性节点</button>
</body>
<script>var divObj = document.getElementById('content');function remove(){divObj.removeAttribute('name');console.log(divObj);}function removeNode(){var age = divObj.getAttributeNode('age');var res = divObj.removeAttributeNode(age);console.log(res);console.log(divObj);}
</script>
</html>
7、removeChild()

这个方法经常用到，他可以删除元素节点中的某个子节点。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<ul id="content"><li>列表1</li><li>列表2</li></ul>
<button onclick="remove()">删除子节点</button>
</body>
<script>var ulObj = document.getElementById('content');function remove(){ulObj.removeChild(ulObj.firstChild);}
</script>
</html>
8、replaceChild()

这个方法可以用一个新的节点替换某一个子节点，它有两个参数：

  • 参数1：一个新的节点
  • 参数2: 要替换的子节点
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<ul id="content"><li>列表1</li><li>列表2</li><li>列表3</li></ul>
<button onclick="rep()">替换子节点</button>
</body>
<script>function rep(){var ulObj = document.getElementById('content');var first = ulObj.childNodes[1];var newObj = document.createTextNode('新的文本节点');first.replaceChild(newObj,first.childNodes[0]);}
</script>
</html>
9、getElementByTagName()

这个方法可以获取某个元素下所有的指定的标签元素

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<ul id="content"><li>列表1</li><li>列表2</li><li>列表3</li></ul>
<button onclick="getTags()">获取所有li标签</button>
</body>
<script>function getTags(){var ulObj = document.getElementById('content');var liList = ulObj.getElementsByTagName('li');console.log(liList);}
</script>
</html>

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

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

相关文章

Hotspot源码解析-第27章-开始执行Java代码

Hotspot源码解析-第27章-开始执行Java代码

第27章-开始执行Java代码 截止第26章完成了 创建Java虚拟的整个过程&#xff08;Threads::create_vm()&#xff09;&#xff0c;在第5章时&#xff0c;有对后续流程的一个简单介绍&#xff0c;从这一章开始&#xff0c;要对后续流程做细节介绍&#xff0c;那就接着第5章继续讲…
阅读更多...
dvwa，xss反射型lowmedium

dvwa，xss反射型lowmedium

xss&#xff0c;反射型&#xff0c;low&&medium low发现xss本地搭建实操 medium作为初学者的我第一次接触比较浅的绕过思路 low 发现xss 本关无过滤 <script>alert(/xss/)</script> //或 <script>confirm(/xss/)</script> //或 <script&…
阅读更多...
springboot整合日志处理Logback

springboot整合日志处理Logback

引言 ​ springboot框架 集成日志 logback 日志 ​ Logback是由log4j创始人设计的又一个开源日志组件。目前&#xff0c;logback分为三个模块&#xff1a;logback-core&#xff0c;logback-classic和logback-access。是对log4j日志展示进一步改进! 日志的级别 All < Trace…
阅读更多...
C++(6) 继承

C++(6) 继承

文章目录 继承1. 继承1.1 什么是继承1.2 C 继承方式1.2.1 基本案例1.2.2 继承权限组合1.2.3 继承中构造函数的说法1.2.4 继承中析构函数的执行顺序1.2.5 继承中变量名称冲突问题1.2.6 继承中函数【重写】 继承 1. 继承 1.1 什么是继承 面向对象程序设计中最重要的一个概念是继…
阅读更多...
硬件知识（2） 手机的传感器-sensor

硬件知识（2） 手机的传感器-sensor

#灵感# 看看小米在干啥 手机型号&#xff1a;Redmi Note 13 Pro&#xff0c;解读一下它宣传的手机卖点。 目录 宣传1&#xff1a;1/1.4" 大底&#xff0c;f/1.65 大光圈&#xff0c; 宣传2&#xff1a;支持 2 亿像素超清直出&#xff0c;分辨率高达 16320 x 12240 宣…
阅读更多...
基于STM32的以太网通信协议选择与实现

基于STM32的以太网通信协议选择与实现

在基于STM32的以太网通信中&#xff0c;主要涉及到选择合适的通信协议和实现对应的功能代码。常见的通信协议包括TCP/IP、UDP、HTTP等&#xff0c;选择合适的协议取决于具体应用需求。以下将介绍在STM32上进行以太网通信时&#xff0c;常用的通信协议选择以及对应功能代码的实现…
阅读更多...
C++仿函数、万能头文件、transform学习

C++仿函数、万能头文件、transform学习

这是网上的一个代码，里面的一些东西以前没用过； #include <bits/stdc++.h> using namespace std;// A Functor class increment { private:int num; public:increment(int n) : num(n) { }int operator () (int arr_num) const {return num + arr_num;} };// Driver …
阅读更多...
如何配置MacLinuxWindows环境变量

如何配置MacLinuxWindows环境变量

这里写目录标题 什么是环境变量什么是PATH为什么要配置环境变量 如何配置环境变量环境变量有哪些环境变量加载顺序环境变量加载详解 配置参考方法一&#xff1a; export PATHLinux环境变量配置方法二&#xff1a;vim ~/.bashrcLinux环境变量配置方法三&#xff1a;vim ~/.bash_…
阅读更多...
macOS与Linux相互投屏的方法

macOS与Linux相互投屏的方法

很多人面对跨系统投屏都望而却步。其实只要找对方法&#xff0c;两台不同系统的电脑也可以相互投屏。 今天就来看看Linux系统和macOS系统如何相互投屏&#xff01; 第一步&#xff0c;将Linux系统电脑和macOS系统电脑连接同一网络。假设是macOS系统投屏到Linux系统&#xff0c;…
阅读更多...
Docker版Jellyfin手动安装插件

Docker版Jellyfin手动安装插件

Docker版Jellyfin手动安装插件 目录隐射&#xff0c;然后把下载的插件解压到目录中查询运行中的容器&#xff0c;拿到容器id切换到容器目录下 复制解压好的插件(整个文件夹)到容器中存放的插件目录中重启容器后就能在插件中看到了 目录隐射&#xff0c;然后把下载的插件解压到目…
阅读更多...
用可视化案例讲Rust编程3. 函数分解与参数传递

用可视化案例讲Rust编程3. 函数分解与参数传递

上一节我们在绘制面要素的时候&#xff0c;发现了函数功能体是三个不同步骤组成的&#xff1a; 读取文件获得geometry把geometry转变为绘图元素trace把绘图元素绘制到地图上 像我们上一节那样&#xff0c;把所有的功能都写在一个函数里面&#xff0c;这样的函数灵活性太差&am…
阅读更多...
防御保护第四次作业

防御保护第四次作业

防火墙的智能选路 就近选路 --- 我们希望在访问不同运营商的服务器是&#xff0c;通过对应运营商的链路。这样可以高 通信效率&#xff0c;避免绕路。 策略路由 -- PBR 传统的路由&#xff0c;仅基于数据包中的目标IP地址查找路由表。仅关心其目标&#xff0c;所以&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023