首页
所有分类
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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
babel基本使用详解
Feb 17 Javascript
详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）
Jul 13 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
JavaScript实现联动菜单特效
Jan 07 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
数据加密(1) kafka(2) 公共键(1) key(1) 连接器(1) pycryto(1) HDR(1) 高动态范围(1) 曝光融合(1) shell脚本(1)
You might like
PHP+javascript模拟Matrix画面
2006/10/09 PHP
一个更简单的无限级分类菜单代码
2007/01/16 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
python3 读写文件换行符的方法
2018/04/09 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
拿来就用！Python批量合并PDF的示例代码
2020/08/10 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
详解Scrapy Redis入门实战
2020/11/18 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
美国学校用品、教室和教学商店：Discount School Supply
2018/04/04 全球购物
Bluebella法国官网：英国性感内衣品牌
2019/05/03 全球购物
Ariat官网：美国马靴和服装品牌
2019/12/16 全球购物
毕业生教师求职信
2013/10/20 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
工资收入证明样本（5篇）
2014/09/16 职场文书
决心书格式范文
2015/09/23 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
在Python中如何使用yield
2021/06/07 Python
Pytorch可视化的几种实现方法
2021/06/10 Python
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android
Oracle使用别名的好处
2022/04/19 Oracle