深入理解DOM节点类型第六篇——特性节点Attribute

前面的话

  元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点。尽管特性是节点,但却不是DOM节点树的一部分。本文将详细介绍该部分内容

 

特征

  特性节点的三个node属性————nodeType、nodeName、nodeValue分别是2、特性名称和特性值,其父节点parentNode是null

  [注意]关于特性节点是否存在子节点,各个浏览器表现不一致

<div id="box"></div>
<script>
var oBox = document.getElementById('box');
var oAttr = oBox.attributes;
//(chrome\safari\IE9 \firefox) 2 id box null
//(IE7-) 2 onmsanimationiteration null null
console.log(oAttr[0].nodeType,oAttr[0].nodeName,oAttr[0].value,oAttr[0].parentNode)
//(chrome\firefox) undefined
//(safari) Text
//(IE9 ) box
//(IE8-) 报错
console.log(oAttr[0].childNodes[0])
</script> 

 

属性

  Attr特性节点有3个属性:name、value和specified

name 

  name是特性名称,与nodeName的值相同

value

  value是特性的值,与nodeValue的值相同

specified

  specified是一个布尔值,用以区别特性是在代码中指定的,还是默认的。这个属性的值如果为true,则意味着要么是在HTML中指定了相应特性,要么是通过setAttribute()方法设置了该属性。在IE中,所有未设置过的特性的该属性值都为false,而在其他浏览器中,所有设置过的特性的该属性值都是true,未设置过的特性,如果强行为其设置specified属性,则报错。因为undefied没有属性

<div class="box" id="box"></div>
<script>
var oBox = document.getElementById('box');
var oAttr = oBox.attributes;
//(chrome\safari\IE8 )class class true
//(firefox)id id true
//(IE7-)onmsanimationiteration onmsanimationiteration true
console.log(oAttr[0].name,oAttr[0].nodeName,oAttr[0].name == oAttr[0].nodeName)
//IE7- "null" null false
//其他浏览器 box box true
console.log(oAttr[0].value,oAttr[0].nodeValue,oAttr[0].value == oAttr[0].nodeValue)
//IE7- false
//其他浏览器 true
console.log(oAttr[0].specified)//true
</script>
<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>    
var oBox = document.getElementById('box');
console.log(oBox.attributes.id.specified)//true
console.log(oBox.attributes.onclick.specified)//在IE7-浏览器下会返回false,在其他浏览器下会报错
</script>

  specified常常用于解决IE7-浏览器显示所有特性的bug

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
function outputAttributes(element){
var pairs = new Array(),attrName,attrValue,i,len;
for(i = 0,len=element.attributes.length;i<len;i  ){
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue;
if(element.attributes[i].specified){
pairs.push(attrName  "=\""   attrValue   "\"");    
}
}
return pairs.join(" ");
}
//所有浏览器下都返回title="test" class="box" id="box" index="123" name="abc"(顺序不一样)
console.log(outputAttributes(document.getElementById("box")))
</script> 

 

方法

createAttribute()

  createAttribute()方法传入特性名称并创建新的特性节点

setAttributeNode()

  setAttributeNode()方法传入特性节点并将特性添加到元素上,无返回值

getAttributeNode()

  getAttributeNode()方法传入特性名并返回特性节点

removeAttributeNode()

  removeAttributeNode()方法传入特性名删除并返回删除的特性节点,但IE7-浏览器下无法删除

<div id="box"></div>
<script>
var oBox = document.getElementById('box');
var attr = document.createAttribute('title');
attr.value = "test";
console.log(oBox.setAttributeNode(attr));//null
console.log(oBox.getAttributeNode("title").name,attr.name);//title title
console.log(oBox.getAttributeNode("title").value,attr.value);//test test
//返回删除的节点
console.log(oBox.removeAttributeNode(attr));
//IE7-浏览器下无法删除,其他浏览器返回null
console.log(oBox.getAttributeNode("title"));
</script>

 

最后

  特性节点在12种节点类型中排行老二,但是其属性和方法并不常用,因为元素节点都有对应的可替代的方法,而且使用起来更为方便

  本文的重点再重复一次:特性是节点,但不存在DOM树中

  以上


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362969.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vista,Windows7中给IIS7添加PHP支持

截止到发文时&#xff08;2009年9月25日&#xff09;&#xff0c;PHP是最新版本为5.3.0&#xff0c;但是5.3.0在IIS中的运行方式是FastCGI&#xff0c;要在Vista的IIS7上实现这一点我始终没弄成。最后我还是用的老方法&#xff0c;ISAPI&#xff0c;选用了一个5.3以前的版本&am…

python画手绘图

第一步&#xff1a;插入代码 #e17.1HandDrawPic.py from PIL import Image import numpy as np vec_el np.pi/2.2 # 光源的俯视角度&#xff0c;弧度值 vec_az np.pi/4. # 光源的方位角度&#xff0c;弧度值 depth 10. # (0-100) im Image.open(C:\\Users\\Thinkpad\\Deskt…

cf1208G Polygons 欧拉函数

链接 cf 给你两个正整数\(n\)和\(k\)&#xff0c;询问在一个圆上你最少需要几个点构才能造出\(k\)个边数小于等于\(n\)的正多边形 思路 深受迫害&#xff0c;所以写的详细一点&#xff0c;不会请留言。 性质1 考虑加进一个\(x\)边形。那么他的因子\(d\)一定在他之前加进来了. 因…

Java 8:功能性VS传统

业务逻辑是相同的&#xff1a; 给定一个由访问次数/时间组成的String表达式&#xff0c;例如&#xff1a;“ 1 / 24h&#xff0c;1..3 / 3h&#xff0c;5 / *” 然后&#xff0c;结果应为以下字符串列表&#xff1a; “ 1 / 24h”&#xff0c; “ 1 / 3h”&#xff0c;“ 2…

深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器

前面的话 过滤选择器的内容非常多&#xff0c;本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当前获得焦点的元素 <div><button>btn1</button><button>btn2</button><button>btn3</button></d…

aop 幂等验证(二)

1 创建IIdempotent Target({ElementType.PARAMETER, ElementType.METHOD}) Retention(RetentionPolicy.RUNTIME) Documented public interface IIdempotent { } 2 创建aop Component Aspect public class IdempotentAction {public final static String ERROR_REPEATSUBMIT &q…

pursuit of happiness

看的过程中&#xff0c;一直在看时间&#xff0c;只剩30分钟了&#xff0c;20分&#xff0c;15分了&#xff0c;主人公怎么还没发达。 因为那种痛苦&#xff0c;绝望&#xff0c;沮丧&#xff0c;真的可以隔着屏幕传递过来。 你会带着儿子住厕所么&#xff1f; 你会拼了老命赶时…

解读阿里巴巴集团的“大中台、小前台”组织战略

解读阿里巴巴集团的“大中台、小前台”组织战略 https://www.iyiou.com/p/92012.html 亿欧导读 ] 阿里的“中台战略” 不是一个简单的组织变革&#xff0c;还有业务变革、机制变革、技术架构变革的一次全面转型。 【编者按】阿里巴巴“大中台小前台”的中台战略的官方提法源自2…

编译时检查JPA查询

JPA提供了几种查询数据的方法。 可以根据各种标准&#xff08;例如&#xff0c;所使用的语言&#xff08;SQL与JPQL&#xff09;或查询是静态的&#xff08;编译时间&#xff09;还是动态的&#xff08;执行时间&#xff09;&#xff09;对此类替代方案进行分类。 静态查询是使…

深入理解DOM节点关系

前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构。节点分为12种不同类型&#xff0c;每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法&#xff0c;也与其他节点存在某种关系。节点之间的关系构成了层次&#xff0c;而所有页面标记则…

Windows服务编写

摘要&#xff1a;几乎所有的操作系统在启动的时候都会启动一些不需要与用户交互的进程&#xff0c;这些进程在Windows中就被称作服务。它由服务程序、服务控制程序&#xff08;&#xff33;&#xff23;&#xff30;&#xff0c;service control program&#xff09;和服务控制…

1031 查验身份证 (15 分)

#include <iostream> #include <string> using namespace std; int main() {int n, i, sum 0, cnt 0; // 这是为零很重要string s;int w[17] { 7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2 };char z[11] { 1, 0, X, 9, 8, 7, 6, 5, 4, 3, 2 };cin >> n;getcha…

分布式锁(基于redis和zookeeper)详解

分布式锁&#xff08;基于redis和zookeeper&#xff09;详解 https://blog.csdn.net/a15835774652/article/details/81775044 为什么写这篇文章&#xff1f; 目前网上大部分的基于zookeeper&#xff0c;和redis的分布式锁的文章都不够全面。要么就是特意避开集群的情况&#xf…

深入理解this机制系列第三篇——箭头函数

前面的话 this机制与函数调用有关&#xff0c;而作用域则与函数定义有关。有没有什么是可以将this机制和作用域联系起来的呢&#xff1f;本文将介绍ES6新增的内容——箭头函数 痛点 对于闭包的痛点在于&#xff0c;闭包的this默认绑定到window对象&#xff0c;但又常常需要访问…

C# CheckedListBox控件的用法

最近用到checklistbox控件&#xff0c;在使用其过程中&#xff0c;花了较多的时间&#xff0c;这里我收集了其相关的代码段&#xff0c;希望对大家有所帮助。1.添加项checkedListBox1.Items.Add("蓝色"); checkedListBox1.Items.Add("红色"); checkedListB…

如何从JSF获取JSON响应?

许多JavaScript小部件都希望使用JSON格式的数据和选项。 如今&#xff0c;选择一个很酷的小部件并将其包装在一个复合组件中确实很容易。 但是第一个问题是如何发送AJAX请求并以正确的JSON格式接收响应。 JSF用户经常会提出这个问题 。 您需要的只是一个XHTML facelet&#xff…

使用AtomicLong,经典银行账户问题

1.新建Account类&#xff0c;使用AtomicLong定义账户余额&#xff0c;增加和减少金额方法使用getAndAdd方法。 package com.xkzhangsan.atomicpack.bank;import java.util.concurrent.atomic.AtomicLong;public class Account {private AtomicLong balance new AtomicLong();p…

Redis与Zookeeper实现分布式锁的区别

Redis与Zookeeper实现分布式锁的区别 1.分布式锁解决方案 1.采用数据库 不建议 性能不好 jdbc 2.基于Redis实现分布式锁&#xff08;setnx&#xff09;setnx也可以存入key&#xff0c;如果存入key成功返回1&#xff0c;如果存入的key已经存在了&#xff0c;返回0. 3.基于Zookee…

JavaFX技巧12:在CSS中定义图标

当您是像我这样来自Swing的UI开发人员时&#xff0c;您很有可能仍在代码中直接设置图像/图标。 最可能是这样的&#xff1a; import javafx.scene.control.Label; import javafx.scene.image.ImageView;public class MyLabel extends Label {public MyLabel() {setGraphic(new…

被嫌弃的eval和with

前面的话 eval和with经常被嫌弃&#xff0c;好像它们的存在就是错误。在CSS中&#xff0c;表格被嫌弃&#xff0c;在网页中只是用表格来展示数据&#xff0c;而不是做布局&#xff0c;都可能被斥为不规范&#xff0c;矫枉过正。那关于eval和with到底是什么情况呢&#xff1f;本…