搜索
首页web前端js教程js基础之DOM中元素对象的属性方法详解

js基础之DOM中元素对象的属性方法详解

高洛峰
高洛峰
Jan 21, 2017 am 09:26 AM

在 HTML DOM （文档对象模型）中，每个部分都是节点。

节点是DOM结构中最基本的组成单元，每一个HTML标签都是DOM结构的节点。

文档是一个    文档节点 。

所有的HTML元素都是    元素节点

所有 HTML 属性都是    属性节点

文本插入到 HTML 元素是    文本节点

注释是    注释节点。

最基本的节点类型是Node类型，其他所有类型都继承自Node，DOM操作往往是js中开销最大的部分，因而NodeList导致的问题最多。要注意：NodeList是‘动态的'，也就是说，每次访问NodeList对象，都会运行一次查询，虽然这样增加了开销，但可以保证我们新添加的节点都能在NodeList中访问的到。

所有的元素节点都有共用的属性和方法，让我们来详细看一看：

先来看较为常用的 通用 属性

1  element.id       设置或返回元素的 id。

2  element.innerHTML   设置或者返回元素的内容，可包含节点中的子标签以及内容

3  element.innerText  设置或者返回元素的内容，不包含节点中的子标签以及内容

4  element.className   设置或者 返回元素的类名

5  element.nodeName    返回该节点的大写字母标签名

6  element.nodeType   返回该结点的节点类型，1表示元素节点  2表示属性节点……

7  element.nodeValue  返回该节点的value值，元素节点的该值为null

8  element.childNodes  返回元素的子节点的nodeslist对象，nodelist类似于数组，有length属性，可以使用方括号 [index] 访问指定索引的值(也可　　以使用item(index)方法)。但nodelist并不是数组。

9  element.firstChild/element.lastChild  返回元素的第一个/最后一个子节点(包含注释节点和文本节点)

10  element.parentNode  返回该结点的父节点

11  element.previousSibling  返回与当前节点同级的上一个节点(包含注释节点和文本节点)

12  element.nextSibling   返回与当前节点同级的下一个节点(包含注释节点和文本节点)

13  element.chileElementCount :  返回子元素(不包括文本节点以及注释节点)的个数

14  element.firstElementChild /lastElementChild 返回第一个/最后一个子元素(不包括文本节点以及注释节点)

15  element.previousElementSibling/nextElementSibling  返回前一个/后一个兄弟元素(不包括文本节点以及注释节点)

16  element.clientHeight/clientWidth  返回内容的可视高度/宽度（不包括边框，边距或滚动条）

17  element.offsetHeight/offsetWidth /offsetLeft/offset/Top 返回元素的高度/宽度/相对于父元素的左偏移/右偏移(包括边框和填充,不包括边距)

18  element.style  设置或返回元素的样式属性,。示例：element.style.backgroundColor  注意，与CSS不同，style的属性要去掉横杠，第二个单词　　首字母要大写

19  element.tagName  返回元素的标签名(大写)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
      border: 5px solid rebeccapurple;
      background-color: antiquewhite;
      width: 440px;
      height: 120px;
      position: relative;
      left: 20px;
      top:20px;
      margin:10px;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
      text-indent: 40px;
    }
  </style>
 
</head>
 
 
<body>
  <form id=&#39;first_form&#39; name="cangjingge" >
    请选择功法：<br/>
    <input type="radio" name="gongfa" value="jysg">九阳神功<br/>
    <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
    <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
    <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  </form>
  <p>少侠请三思！！！</p><!--注释标签-->
  <p>推荐功法-->葵花宝典</p>
 
  <script>
    //js演示代码请添加至此
    var a=document.getElementById(&#39;first_form&#39;),
      b = document.getElementsByTagName(&#39;p&#39;)[0];
 
    console.log(a.id);
    console.log(a.innerHTML);
    console.log(a.className);
    console.log(a.childNodes);
    console.log(a.firstChild);
    console.log(a.lastChild);
    console.log(a.nodeName);
    console.log(a.nodeType);
    console.log(a.nodeValue);
    console.log(a.parentNode);
    console.log(a.clientHeight);
    console.log(a.offsetHeight);
    console.log(b.nextSibling);
    console.log(b.nextElementSibling);
 
  </script>
 
</body>
 
 
</html>

浏览器显示结果：

js基础之DOM中元素对象的属性方法详解

还有某些专属属性

专属属性指那些专属于某种标签的属性。比如 3499910bf9dac5ae3c52d5ede7383485 标签，有href和target属性。a1f02c36ba31691bcfe87b2722de723b 有src属性; ff9c23ada1bcecdd1a0fb5d5a0f18437有entype以及action属性……

a_element.href  返回当前节点指向的超链接

再来看看较为常用的通用方法：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
    }
  </style>
 
</head>
 
 
<body>
  <form id=&#39;first_form&#39; name="cangjingge" >
    请选择功法：<br/>
    <input type="radio" name="gongfa" value="jysg">九阳神功<br/>
    <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
    <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
    <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  </form>
  <p>少侠请三思！！！</p>
 
  <script>
    //js演示代码请添加至此
     
  </script>
 
</body>
 
 
</html>

(以下所有js演示代码都是以本文档中的 示例html代码 为实验对象)

1  element.appendChild(nodeName)   向元素添加新的子节点，作为最后一个子节点，并返回该子节点。如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

js演示代码：

var a=document.getElementById(&#39;first_form&#39;);  
var textnode=document.createTextNode("慎重选择"); 
a.appendChild(textnode)

2  element.getAttribute(para)   返回元素节点的指定属性值。

js演示代码：

var a=document.getElementById(&#39;first_form&#39;);
console.log(a.getAttribute(&#39;name&#39;))      //控制台输出name的值

3  element.getAttributeNode(para)   返回指定的属性节点。

js演示代码：

var a=document.getElementById(&#39;first_form&#39;);
console.log(a.getAttributeNode(&#39;name&#39;))      //控制台输出name属性节点

4  element.getElementsByTagName(para) 返回拥有指定标签名的所有子元素的集合。

js演示代码：

var a=document.getElementById(&#39;first_form&#39;);
console.log(a.getElementsByTagName(&#39;input&#39;))      //控制台输出

5  element.hasAttribute(para)  如果元素拥有指定属性，则返回true，否则返回 false。

js演示代码：

var a=document.getElementById(&#39;first_form&#39;);
console.log(a.hasAttribute(&#39;name&#39;))      //控制台输出

6  element.insertBefore(insertNode,appointedNode)  在指定的已有的子节点之前插入新节点。

js演示代码：

var a=document.getElementById(&#39;first_form&#39;);
    var inputList=document.getElementsByTagName(&#39;input&#39;);
    var newNode=document.createElement(&#39;input&#39;);
    var newNode2=document.createTextNode(&#39;天马流星拳&#39;);
    var br=document.createElement(&#39;br&#39;);
    newNode.type=&#39;radio&#39;;
    newNode.name=&#39;gongfa&#39;;
    newNode.value=&#39;tmlxq&#39;;
    a.insertBefore(newNode,inputList[2]);
    a.insertBefore(newNode2,inputList[3]);
    a.insertBefore(br,inputList[3]);

7  element.removeAttribute() 从元素中移除指定属性。

js示例代码：

var a=document.getElementById(&#39;first_form&#39;);
a.removeAttribute(&#39;name&#39;);
console.log(a.hasAttribute(&#39;name&#39;))

8  element.removeChild()   从元素中移除子节点。移除的节点虽然不在文档树中了，但其实还在内存中，可以随时被引用。

js示例代码：

var a=document.getElementById(&#39;first_form&#39;);
    a.removeChild(a.childNodes[3]);

9  element.replaceChild(newNode,replaceNode)  把指定节点替换为新节点。

10  element.setAttribute(attrName,attrValue)  把指定属性设置或更改为指定值。

js示例代码：

var a=document.getElementById(&#39;first_form&#39;);
    a.setAttribute(&#39;name&#39;,&#39;shaolinsi&#39;);
    console.log(a.name)

11  element.setAttributeNode()    修改指定属性节点

js示例代码：

var a=document.getElementById(&#39;first_form&#39;);
    var attr = document.createAttribute(&#39;id&#39;);
    attr.value=&#39;the_first&#39;;
    a.setAttributeNode(attr);
　　　　 console.log(a.id)

12  nodelist.item() 返回 NodeList 中位于指定下标的节点。

js示例代码：

var a=document.getElementsByTagName(&#39;input&#39;)
console.log(a.item(2))

以上就是小编为大家带来的js基础之DOM中元素对象的属性方法详解全部内容了，希望大家多多支持PHP中文网~

更多js基础之DOM中元素对象的属性方法详解相关文章请关注PHP中文网！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
JavaScript引擎：比较实施JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScript超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。 首先，什么是多租户SaaS应用程序？ 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。

Python还是JavaScript更好？Python还是JavaScript更好？Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习，JavaScript更适合前端和全栈开发。 1.Python以简洁语法和丰富库生态着称，适用于数据分析和Web开发。 2.JavaScript是前端开发核心，Node.js支持服务器端编程，适用于全栈开发。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

显示更多

热门话题

gmail邮箱登陆入口在哪里
7484
15
CakePHP 教程
1377
52
steam的账户名称是什么格式
77
11
win11激活密钥永久
51
19
NYT连接提示和答案
19
36
显示更多