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() 用于返回属性值时, ...
随机推荐
- 图像块的访问(填充 padding,步长 stride,窗 Window/kernel/filter)
无填充是有填充的特例(填充为 1). utilities(matlab)-- 图像分块(image2cols.cols2image)(未填充) 1. 一个图像块 ⇒ 返回一个值 输出矩阵的大小: ou ...
- QT开发环境的建立以及QTE4.6.3、tslib1.4的移植过程
1.首先是建立Linux开发环境1.1.在windowsXP下安装博创公司提供的虚拟机软件VMware Workstation,版本为VMware-workstation-full-7.0.1-227 ...
- Codeforces 15C Industrial Nim 简单的游戏
主题链接:点击打开链接 意甲冠军: 特定n 下列n行,每一行2的数量u v 表达v礧:u,u+1,u+2···u+v-1 问先手必胜还是后手必胜 思路: 首先依据Nim的博弈结论 把全部数都异或一下, ...
- WPF MVVM模式中,通过命令实现窗体拖动、跳转以及显隐控制
原文:WPF MVVM模式中,通过命令实现窗体拖动.跳转以及显隐控制 在WPF中使用MVVM模式,可以让我们的程序实现界面与功能的分离,方便开发,易于维护.但是,很多初学者会在使用MVVM的过程中遇到 ...
- 制作一个简单的WPF图片浏览器
原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1. 对指定文件夹下所有JPG文件进行预览2. 对选定图片进行旋转3. 对选定图片 ...
- HDU 1618 Oulipo KMP解决问题的方法
鉴于两个字符串,寻找一个字符串的频率,另一个字符串出现. 原版的kmp另一个陷阱.以下凝视了,标不是踩着好,有加班一定几率,也有机会错误,根据不同的字符串可以是详细. 变化看起来像一个,kmp速度是非 ...
- A Byte of Python (for Python 3.0) 下载
在线阅读:http://www.swaroopch.org/notes/Python_en:Table_of_Contents 英文版 下载地址1:http://files.swaroopch.com ...
- Robot Framework 快速入门_中文版
目录 介绍 概述 安装 运行demo 介绍样例应用程序 测试用例 第一个测试用例 高级别测试用例 数据驱动测试用例 关键词keywords 内置关键词 库关键词 用户定义关键词 变量 定义变量 使用变 ...
- abp项目 从sql server迁移至mysql
官方资料:https://aspnetboilerplate.com/Pages/Documents/EF-MySql-Integration 实验发现,还差了两步 整理一下,步骤如下: 1.引用My ...
- Tab切换效果的实现
<!--引用jquery和bootstrap--> <link rel="stylesheet" href="~/Content/bootstrap.m ...