js基础之DOM中元素对象的属性方法详解-js教程-PHP中文网

首页

web前端

js教程

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中元素对象的属性方法详解

还有某些专属属性

专属属性指那些专属于某种标签的属性。比如标签，有href和target属性。有src属性;

有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

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7467

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何创建和发布自己的JavaScript库？ Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能？ Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

如何使用浏览器开发人员工具有效调试JavaScript代码？ Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。

如何使用源地图调试缩小JavaScript代码？ Mar 18, 2025 pm 03:17 PM

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。

初学者的打字稿，第2部分：基本数据类型 Mar 19, 2025 am 09:10 AM

掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型与JavaScript一样，TypeScript中的null

如何有效地使用Java的收藏框架？ Mar 13, 2025 pm 12:28 PM

本文探讨了Java收藏框架的有效使用。它强调根据数据结构，性能需求和线程安全选择适当的收集（列表，设置，地图，队列）。通过高效优化收集用法

开始使用Chart.js：PIE，DONUT和BUBBLE图表 Mar 15, 2025 am 09:19 AM

本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前，我们已学习了 Chart.js 的四种图表类型：折线图和条形图（教程二），以及雷达图和极地区域图（教程三）。创建饼图和环形图饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如，可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比，或不同候选人在选举中获得的投票百分比。饼图仅适用于比较单个参数或数据集。需要注意的是，饼图无法绘制值为零的实体，因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体

See all articles

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题

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