首页
所有分类
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 相关文章推荐
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
关于javascript作用域的常见面试题分享
Jun 18 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
Node.js实现批量下载图片简单操作示例
Jan 18 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
mediapipe(1) 分词器(1) re模块(2) 计算机视觉(2) for(1) 事件调度器(1) cvzone(1) 无限迭代(1) while(1) okenizer(1)
You might like
用PHP和MySQL保存和输出图片
2006/10/09 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
Python中super的用法实例
2015/05/28 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Python缓存技术实现过程详解
2019/09/25 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
基于python的列表list和集合set操作
2019/11/24 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
美国高端牛仔品牌：Silver Jeans
2019/12/12 全球购物
编写一个 C 函数，该函数在一个字符串中找到可能的最长的子字符串，且该字符串是由同一字符组成的
2015/07/23 面试题
车间主管岗位职责
2013/11/14 职场文书
土木工程专业推荐信
2014/02/19 职场文书
社区消防工作实施方案
2014/03/21 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
幼师大班个人总结
2015/02/13 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android