DOM模型-属性操作
HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。“属性”本身是一个对象（Attr对象），但是实际上，这个对象极少使用。一般都是通过元素节点对象（HTMlElement对象）来操作属性。本章介绍如何操作这些属性。
一、Element.attributes 属性
元素对象有一个attributes属性，返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反映在这个节点对象上。其他类型的节点对象，虽然也有attributes属性，但返回的都是null，因此可以把这个属性视为元素对象独有的。
单个属性可以通过序号引用，也可以通过属性名引用。
例如： <body bgcolor="yellow" onload="">
document.body.attributes[0]
document.body.attributes.bgcolor
document.body.attributes['ONLOAD']
注意，上面代码的三种方法，返回的都是属性节点对象，而不是属性值。
获取属性值的方法：
获取名称：属性节点对象有name属性，对应该属性的属性名，等同于nodeName属性。
获取属性值：属性节点对象value属性，对应该属性的属性值，等同于nodeValue属性。
例如：
// <div id="mydiv">
var n = document.getElementById('mydiv');
n.attributes[0].name // "id"
n.attributes[0].nodeName // "id"
n.attributes[0].value // "mydiv"
n.attributes[0].nodeValue // "mydiv"
接下来我们写个小dome来遍历一个节点的属性：
var para = document.getElementsByTagName('p')[0];
var result = document.getElementById('result');
if (para.hasAttributes()) {
var attrs = para.attributes;
var output = '';
for(var i = attrs.length - 1; i >= 0; i--) {
output += attrs[i].name + '->' + attrs[i].value;
}
result.textContent = output;
} else {
result.textContent = 'No attributes to show';
}
二、标准属性
HTML 元素的标准属性（即在标准中定义的属性），会自动成为元素节点对象的属性。可以直接获取：
例如：document.id;document.src等等
三、属性的方法
1、getAttribute()-----获取
2、setAttribute()----新增、设置
3、hasAttribute()----判断是否有属性
4、removeAttribute()----移出某个属性
四、dataset 属性
有时，需要在HTML元素上附加数据，供 JavaScript 脚本使用。一种解决方法是自定义属性。
例如：<div id="mydiv" foo="bar">
div元素自定义了foo属性，然后可以用getAttribute()和setAttribute()读写这个属性
这种方法虽然可以达到目的，但是会使得 HTML 元素的属性不符合标准，导致网页代码通不过校验。
更好的解决方法是，使用标准提供的data-*属性
使用元素节点对象的dataset属性，它指向一个对象，可以用来操作 HTML 元素标签的data-*属性
var n = document.getElementById('mydiv');
n.dataset.foo // bar
n.dataset.foo = 'baz'
除了dataset属性，也可以用getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute('data-foo')等方法操作data-*属性。
注意：data-后面的属性名有限制。
1、只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_)。
2、属性名不应该使用A到Z的大写字母，比如不能有data-helloWorld这样的属性名，而要写成data-hello-world。
转成dataset的键名时，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变。
反过来，dataset的键名转成属性名时，所有大写字母都会被转成连词线+该字母的小写形式，其他字符不变。
例如：dataset.helloWorld会转成data-hello-world。
DOM模型-属性操作的更多相关文章
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
- jQuery对标签、类样式、值、文档、DOM对象的操作
jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...
- 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- jQuery使用（二）：DOM样式操作和属性操作
DOM取值与赋值 .html() .text() .size() 1.html()方法类似原生DOM的属性innerHTML,不传入参数的时候默认为取指定元素内的HTML内容,包含前后空白文本结构,以 ...
- Dom的样式操作和属性操作
如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...
- Dom样式操作-属性操作
1. 对样式进行操作: 1) 以样式(C1,C2等)为最小单位进行修改. className, classList, (以列表形式获得) classList.add("C2"), ...
- dom操作 属性操作 样式操作
jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...
- JQuery DOM操作（属性操作/样式操作/文档过滤）
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- jQuery属性操作之DOM属性操作
DOM属性操作是对DOM元素的属性进行读取.设置和移除操作, 比如prop(). removeProp(). 1. prop() 1.1 使用prop()获取返回值 prop() 用于返回属性值时, ...
随机推荐
- 编程算法 - 二叉搜索树(binary search tree) 代码(C)
二叉搜索树(binary search tree) 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 二叉搜索树(binary search tree)能 ...
- GammaRay is a tool to poke around in a Qt-application（确实很多功能）
GammaRay is a tool to poke around in a Qt-application and also to manipulate the application to some ...
- PCI GXL学习之二次开发篇
作者:朱金灿 来源:http://blog.csdn.net/clever101 gxl的二次开发分初级和高级之分.初级是gxl提供了几百个模块供你编排成不同的作业.高级就是你可以编写你的算法模块,然 ...
- GIT 单个文件还原到历史版本号
首先检查在历史文件中的版本号信息:git log <file> 将文件还原到历史版本号:git reset 版本号 <file> 文档工作区的检测:git checkout - ...
- javascript相框echarts插件实现酷立方效果图的人
最近由于项目需求,我们需要做的一类似网络效应的人立方效果,很多文件中的查询之后.百度发现echarts开源组件非常适合,而加载速度是伟大的.echarts图形主要使用html5这些新功能做,使用can ...
- QWidget 之paint部分杂记（从Qt4.0到4.8的进化，在Qt 4.4中，Alien Widget诞生了）
Qt 4.0 automatically double-buffers Qt 4.1 QWidget::autoFillBackground Qt 4.2 delayed widget creatio ...
- JDK源代码学习系列03----StringBuffer+StringBuilder
JDK源代码学习系列03----StringBuffer+StringBuilder 因为前面学习了StringBuffer和StringBuilder的父类 ...
- 分享 WebBrowser显示Html内容3点细节技巧,解决刷新后空白
直接显示Html内容,不像直接导航网址容易处理: 问题:按微软的控件属性提示,可以用WebBrowser.DocumentText 属性赋值 ,但是这种赋值,只是首次有效,后续切换都没啥作用. 下面给 ...
- 如若已在管理后台更新域名配置，请刷新项目配置后重新编译项目，操作路径：“项目-域名信息” http://www.mysite.com 不在以下 request 合法域名列表中
报错如图 报错文字如下: 如若已在管理后台更新域名配置,请刷新项目配置后重新编译项目,操作路径:“项目-域名信息” http://www.mysite.net 不在以下 request 合法域名列表中 ...
- DirectX 图形流水线
Direct3D 的可编程流水线用来为实时游戏渲染图形(一个词概括——实时渲染) 上面的图是Dx11的实时渲染流水线,Dx的几个版本都是向下兼容的. Input-Assembler Stage: 输入 ...