首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 28, 2016

在 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 lang="en">
<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='first_form' class="form_style" 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('first_form'),
      b = document.getElementsByTagName('p')[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中元素对象的属性方法详解

还有某些专属属性

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

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

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

<!DOCTYPE html>
<html lang="en">
<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='first_form' class="form_style" 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('first_form');   
var textnode=document.createTextNode("慎重选择");  
a.appendChild(textnode)

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

js演示代码：

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

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

js演示代码：

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

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

js演示代码：

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

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

js演示代码：

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

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

js演示代码：

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

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

js示例代码：

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

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

js示例代码：

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

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

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

js示例代码：

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

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

js示例代码：

var a=document.getElementById('first_form');
    var attr = document.createAttribute('id');
    attr.value='the_first';
    a.setAttributeNode(attr);

 console.log(a.id)

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

js示例代码：

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

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

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
详解AngularJS通过ocLazyLoad实现动态（懒）加载模块和依赖
Mar 01 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
温故知新——JavaScript中的字符串连接问题最全总结（推荐）
Aug 21 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
JavaScript实现前端网页版倒计时
Mar 24 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 #Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 #Javascript
微信小程序 loading（加载中提示框）实例
Oct 28 #Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 #Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 #Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 #Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 #Javascript
MapReduce(1) css3 (2) pygame(3) pyqt5(3) DFA(1) Qlabel(1) 切片(1) pycharm(6) Slice(1) linux(15)
You might like
PHP可逆加密/解密函数分享
2012/09/25 PHP
分享PHP header函数使用教程
2013/09/05 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
php中使用websocket详解
2016/09/23 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
网页中实现浏览器的最大，最小化和关闭按钮
2007/03/12 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
详解JS数值Number类型
2018/02/07 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
pycharm 使用心得（九）解决No Python interpreter selected的问题
2014/06/06 Python
python之wxPython应用实例
2014/09/28 Python
Python中字符串对齐方法介绍
2015/05/21 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
Python3 修改默认环境的方法
2019/02/16 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
10种CSS3实现的loading动画，挑一个走吧？
2020/11/16 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
工资收入证明
2014/10/07 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2015年全民创业工作总结
2015/07/23 职场文书