在 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/offsetTop 返回元素的高度/宽度/相对于父元素的左偏移/右偏移(包括边框和填充,不包括边距)

18  element.scrollHeight/scrollWidth/scrollLeft/scrollTop返回整个元素的高度（包括带滚动条的隐蔽的地方）/宽度/返回当前视图中的实际元素的左边缘和左边缘之间的距离/上边缘的距离

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .form_style{
  8.             color: #5b5b5b;
  9.             font-size: large;
  10.             border: 5px solid rebeccapurple;
  11.             background-color: antiquewhite;
  12.             width: 440px;
  13.             height: 120px;
  14.             position: relative;
  15.             left: 20px;
  16.             top:20px;
  17.             margin:10px;
  18.         }
  19.         p {
  20.             color: #5b5b5b;
  21.             font-size: larger;
  22.             text-indent: 40px;
  23.         }
  24.     </style>
  25.  
  26. </head>
  27.  
  28. <body>
  29.     <form  id='first_form'  class="form_style" name="cangjingge" >
  30.         请选择功法：<br/>
  31.         <input type="radio" name="gongfa" value="jysg">九阳神功<br/>
  32.         <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
  33.         <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
  34.         <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  35.     </form>
  36.     <p>少侠请三思！！！</p><!--注释标签-->
  37.     <p>推荐功法--&gt;葵花宝典</p>
  38.  
  39.     <script>
  40.         //js演示代码请添加至此
  41.         var a=document.getElementById('first_form'),
  42.             b = document.getElementsByTagName('p')[0];
  43.  
  44.         console.log(a.id);
  45.         console.log(a.innerHTML);
  46.         console.log(a.className);
  47.         console.log(a.childNodes);
  48.         console.log(a.firstChild);
  49.         console.log(a.lastChild);
  50.         console.log(a.nodeName);
  51.         console.log(a.nodeType);
  52.         console.log(a.nodeValue);
  53.         console.log(a.parentNode);
  54.         console.log(a.clientHeight);
  55.         console.log(a.offsetHeight);
  56.         console.log(b.nextSibling);
  57.         console.log(b.nextElementSibling);
  58.  
  59.     </script>
  60.  
  61. </body>
  62.  
  63. </html>

html代码

浏览器显示结果：

还有某些专属属性

　　专属属性指那些专属于某种标签的属性。比如 <a> 标签，有href和target属性。<img> 有src属性; <form>有entype以及action属性……

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .form_style{
  8.             color: #5b5b5b;
  9.             font-size: large;
  10.         }
  11.         p {
  12.             color: #5b5b5b;
  13.             font-size: larger;
  14.         }
  15.     </style>
  16.  
  17. </head>
  18.  
  19. <body>
  20.     <form  id='first_form'  class="form_style" name="cangjingge" >
  21.         请选择功法：<br/>
  22.         <input type="radio" name="gongfa" value="jysg">九阳神功<br/>
  23.         <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
  24.         <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
  25.         <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  26.     </form>
  27.     <p>少侠请三思！！！</p>
  28.  
  29.     <script>
  30.         //js演示代码请添加至此
  31.  
  32.     </script>
  33.  
  34. </body>
  35.  
  36. </html>

示例html代码

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

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

js演示代码：

  1. var a=document.getElementById('first_form');
  2. var textnode=document.createTextNode("慎重选择");
  3. a.appendChild(textnode)

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

js演示代码：

  1. var a=document.getElementById('first_form');
  2. console.log(a.getAttribute('name'))           //控制台输出name的值

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

js演示代码：

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

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

js演示代码：

  1. var a=document.getElementById('first_form');
  2. console.log(a.getElementsByTagName('input'))           //控制台输出

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

js演示代码：

  1. var a=document.getElementById('first_form');
  2. console.log(a.hasAttribute('name'))           //控制台输出

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

js演示代码：

  1.         var a=document.getElementById('first_form');
  2.         var inputList=document.getElementsByTagName('input');
  3.         var newNode=document.createElement('input');
  4.         var newNode2=document.createTextNode('天马流星拳');
  5.         var br=document.createElement('br');
  6.         newNode.type='radio';
  7.         newNode.name='gongfa';
  8.         newNode.value='tmlxq';
  9.         a.insertBefore(newNode,inputList[2]);
  10.         a.insertBefore(newNode2,inputList[3]);
  11.         a.insertBefore(br,inputList[3]);

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

js示例代码：

  1. var a=document.getElementById('first_form');
  2. a.removeAttribute('name');
  3. console.log(a.hasAttribute('name'))

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

js示例代码：

  1.         var a=document.getElementById('first_form');
  2.         a.removeChild(a.childNodes[3]);

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

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

js示例代码：

  1.         var a=document.getElementById('first_form');
  2.         a.setAttribute('name','shaolinsi');
  3.         console.log(a.name)

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

js示例代码：

  1.         var a=document.getElementById('first_form');
  2.         var attr = document.createAttribute('id');
  3.         attr.value='the_first';
  4.         a.setAttributeNode(attr);
    　　　　 console.log(a.id)

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

js示例代码：

  1. var a=document.getElementsByTagName('input')
  2. console.log(a.item(2))

js基础之DOM中元素对象的属性方法的更多相关文章

  1. DOM中元素对象的属性方法

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    ...

  2. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  3. DOM中元素节点、属性节点、文本节点的理解

    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...

  4. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

  5. DOM中元素节点、属性节点、文本节点

    DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...

  6. DOM中元素节点、属性节点、文本节点的理解13.3

    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返 ...

  7. DOM中元素节点，属性节点，文本节点的理解

    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可 ...

  8. js中__proto__, property, prototype, 对象自身属性方法和原型中的属性方法的区别

    __proto__: 这个属性是实例对象的属性,每个实例对象都有一个__proto__属性,这个属性指向实例化该实例的构造函数的原型对象(prototype). proterty:这个方法是对象的属性 ...

  9. DOM中Event 对象如何使用

    DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...

随机推荐

  1. C++ Style Languages: C++, Objective-C, Java, C#

    Hyperpolyglot.org From Hyperpolyglot.org C++ Style Languages: C++, Objective-C, Java, C# a side-by-s ...

  2. 团队项目开题Scrum Meeting报告

    团队项目开题Scrum Meeting报告 在10月30号星期四的晚上我们团队找到了给我们代码的王翊学长,由学长给我们讲解了他编写IOS平台上北航MOOC系统的架构和思路, 因为我们团队没有苹果公司的 ...

  3. 【Alpha】Task分配与计划发布

     团队项目链接 以上大概是我们的任务分配,根据目前的预计时间来看,到α版本项目稳定下来至少需要440小时的开发时间才能完成. 项目最大的问题点和难点在于其数据量非常之大,计算模块要求非常之多,想象一下 ...

  4. MathExam任务一

    小学一二年级数学计算题 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 60 35 • Es ...

  5. ubuntu安装php-curl拓展

    首先输入apt-cache search curl | grep php查询curl的php支持名字可能会返回如下内容:php5-curl - CURL module for php5安装:sudo ...

  6. 第三周作业（三）WordCount

    这个程序主要就是统计一下文件中的字符数,单词数以及行数. 我的程序很简单,代码很简短,只实现了书中的基本功能. #include <stdio.h> #include <string ...

  7. Redis&PHP的使用安装-windows版

    Redis是一个Key-value的数据结构存储系统,可以以数据库的形式,缓存系统,消息处理器使用,它支持的存储value类型很多,例如,string.list(链表).set(集合).zset(so ...

  8. [转帖]升级 Ubuntu，解决登录时提示有软件包可以更新的问题

    升级 Ubuntu,解决登录时提示有软件包可以更新的问题 2017年12月05日 11:58:17 阅读数:2953更多 个人分类: ubuntu Connecting to ... Connecti ...

  9. HDU3829_Cat VS Dog

    题目是这样的,给定一些人喜欢某只猫或者狗,讨厌某只猫或者狗.求最多能够同时满足多少人的愿望? 题目很有意思.建模后就很简单了. 对于同一只猫或者狗,如果有一个讨厌,另一个人喜欢,那么这两个连一条边.最 ...

  10. 环形buffer缓冲区

    #include <stdio.h> #include <string.h> #include <malloc.h> struct CircleBuf { char ...