JS操作属性节点(非常详细)
创建属性节点
使用 document 对象的 createAttribute() 方法可以创建属性节点,具体用法如下:
document.createAttribute(name)
参数 name 表示新创建的属性的名称。
下面示例创建一个属性节点,名称为 align,值为 center,然后为标签 div id= box 设置属性 align,最后分别使用 3 种方法读取属性 align 的值。
div id= box document.createAttribute(name) /div script var element = document.getElementById( box var attr = document.createAttribute( align attr.value = center element.setAttributeNode(attr); console.log(element.attributes[ align ].value); // center console.log(element.getAttributeNode( align ).value); // center console.log(element.getAttribute( align )); // center /script
属性节点一般位于元素的头部标签中。元素的属性列表会随着元素信息预先加载,并被存储在关联数组中。例如,针对下面 HTML 结构。
div id= div1 >当 DOM 加载后,表示 HTML div 元素的变量 divElement 就会自动生成一个关联集合,它以名值对形式检索这些属性。
divElement.attributes = { id : div1 , class : style1 , lang : en , title : div }在传统 DOM 中,常用点语法通过元素直接访问 HTML 属性,如 img.src、a.href 等,这种方式虽然不标准,但是获得了所有浏览器的支持。
img 元素拥有 src 属性,所有图像对象都拥有一个 src 脚本属性,它与 HTML 的 src 特性关联在一起。下面两种用法都可以很好地工作在不同浏览器中。
img id= img1 src= / script var img = document.getElementById( img1 img.setAttribute( src , http://www.w3.org //HTML 属性 img.src = http://www.w3.org //JavaScript 属性 /script类似的还有 onclick、style 和 href 等。为了保证 JavaScript 脚本在不同浏览器中都能很好地工作,建议采用标准用法,而且很多 HTML 属性并没有被 JavaScript 映射,所以也就无法直接通过脚本属性进行读写。
读取属性值使用元素的 getAttribute() 方法可以读取指定属性的值。用法如下:
getAttribute(name)
参数 name 表示属性名称。
使用元素的 attributes 属性、getAttributeNode() 方法可以返回对应属性节点。
下面示例访问红色盒子和蓝色盒子,然后读取这些元素所包含的 id 属性值。
div id= red 红盒子 /div div id= blue 蓝盒子 /div script var red = document.getElementById( red //获取红色盒子 console.log(red.getAttribute( id )); //显示红色盒子的id属性值 var blue = document.getElementById( blue //获取蓝色盒子 console.log(blue.getAttribute( id )); //显示蓝色盒子的id属性值 /scriptHTML DOM 也支持使用点语法读取属性值,使用比较简便,也获得了所有浏览器的支持。
var red = document.getElementById( red console.log(red.id); var blue = document.getElementById( blue console.log(blue.id);对于 class 属性,则必须使用 className 属性名,因为 class 是 JavaScript 的保留字;对于 for 属性,则必须使用 htmlFor 属性名,这与 CSS 脚本中 float 和 text 属性被改名为 cssFloat 和 cssText 是一个道理。
使用 className 读写样式类。
label id= label1 >对于复合类样式,需要使用 split() 方法劈开返回的字符串,然后遍历读取类样式。
div id= red > 设置属性值使用元素的 setAttribute() 方法可以设置元素的属性值。用法如下:
setAttribute(name, value)
参数 name 和 value 分别表示属性名称和属性值。属性名和属性值必须以字符串的形式进行传递。如果元素中存在指定的属性,它的值将被刷新;如果不存在,则 setAttribute() 方法将为元素创建该属性并赋值。
下面示例分别为页面中 div 元素设置 title 属性。
div id= red 红盒子 /div div id= blue 蓝盒子 /div script var red = document.getElementById( red //获取红盒子的引用 var blue= document.getElementById( blue //获取蓝盒子的引用 red.setAttribute( title , 这是红盒子 //为红盒子对象设置title属性和值 blue.setAttribute( title , 这是蓝盒子 //为蓝盒子对象设置title属性和值 /script下面示例定义了一个文本节点和元素节点,并为一级标题元素设置 title 属性,最后把它们添加到文档结构中。
var hello = document.createTextNode( Hello World! //创建一个文本节点 var h1 = document.createElement( h1 //创建一个一级标题 h1.setAttribute( title , 你好,欢迎光临! //为以及标题定义title 属性 h1.appendChild(hello); //把文本节点增加到一级标题中 document.body.appendChild(h1); //把一级标题增加到文档也可以使用快捷方法设置 HTML DOM 文档中元素的属性值。
label id= label1 文本框: input type= text name= textfield id= textfield / /label script var label1 = document.getElementById( label1 label.className = class1 label.htmlFor = textfield /scriptDOM 支持使用 getAttribute() 和 setAttribute() 方法读写自定义属性,不过 IE 6.0 及其以下版本浏览器对其的支持不是很完善。
直接使用 className 添加类样式,会覆盖掉元素原来的类样式。这时可以采用叠加的方式添加类。
div id= red 红盒子 /div script var red = document.getElementById( red red.className = red red.className += blue /script使用叠加的方式添加类也存在问题,这样容易添加大量重复的类。为此,定义一个检测函数,判断元素是否包含指定的类,然后再决定是否添加类。
script function hasClass (element, className) { //检测类名函数 var reg = new RegExp( (//s|^) + className + (//s|$) return reg.test(element.className); //使用正则检测是否有相同的样式 function addClass (element, className) { //添加类名函数 if (! hasClass (element, className)) element.className += + className; /script div id= red 红盒子 /div script var red = document.getElementById( red addClass(red, red addClass(red, blue /script使用元素的 removeAttribute() 方法可以删除指定的属性。用法如下:
removeAttribute(name)
参数 name 表示元素的属性名。
下面示例演示了如何动态设置表格的边框。
script window.onload = function () { //绑定页面加载完毕时的事件处理函数 var table = document.getElementByTagName( table )[0]; //获取表格外框的引用 var del = document.getElementById( del var reset = document.getElementById( reset del.onclick = function () { table.removeAttribute( border reset.onclick = function () { table.setAttribute( border , 2 /script table width= 100% border= 2 td 数据表格 /td /table button id= del 删除 /button button id= reset 恢复 /button在上面示例中设计了两个按钮,并分别绑定了不同的事件处理函数。单击 删除 按钮即可调用表格的 removeAttribute() 方法清除表格边框,单击 恢复 按钮即可调用表格的 setAttribute() 方法重新设置表哥便可的粗细。
下面示例演示了如何自定义删除类函数,并调用该函数删除指定类名。
script function hasClass (element, className) { //类名检测函数 var reg = new RegExp ( (//s|^) + className + (//s|$) return reg.test (element, className); //使用正则检测是否有相同的样式 function deleteClass (element, className) { if (hasClass (element, className)) { element.className.replace (reg, //捕获要删除样式,然后替换为空白字符串 /script div id= red >上面代码使用正则表达式检测 className 属性值字符串中是否包含指定的类名,如果存在,则使用空字符串替换掉匹配到的子字符串,从而实现删除类名的目的。
使用类选择器HTML 5 为 document 对象和 HTML 元素新增了 getElementsByClassName() 方法,使用该方法可以选择指定类名的元素。getElementsByClassName() 方法可以接收一个字符串参数,包含一个或多个类名,类名通过空格分隔,不分先后顺序,方法返回带有指定类的所有元素 NodeList。
浏览器支持状态:IE 9+、Firefox 3.0+、Safari 3+、Chrome 和 Opera 9.5+。
如果不考虑兼容早期 IE 浏览器或者怪异模式,用户可以放心使用。
下面示例使用 getElementsByClassName( red ) 方法选择文档中所有包含 red 类的元素。
div >下面示例使用 document.getElementById( box ) 方法先获取 div id= box ,然后在它下面使用 getElementsByClassName( blue red ) 选择同时包含 red 和 blue 类的元素。
div id= box div >在 document 对象上调用 getElementsByClassName() 会返回与类名匹配的所有元素,在元素上调用该方法就只会返回后代元素中匹配的元素。
自定义属性HTML 5 允许用户为元素自定义属性,但要求添加 data- 前缀,目的是为元素提供与渲染无关的附加信息,或者提供语义信息。例如:
div id= box data-myid= 12345 data-myname= zhangsan data-mypass= zhang123 自定义数据属性 /div添加自定义属性之后,可以通过元素的 dataset 属性访问自定义属性。dataset 属性的值是一个 DOMStringMap 实例,也就是一个名值对的映射。在这个映射中,每个 data-name 形式的属性都会有一个对应的属性,只不过属性名没有 data- 前缀。
浏览器支持状态:Firefox 6+ 和 Chrome。
下面代码演示了如何自定义属性,以及如何读取这些附加信息。
var div = document.getElementById( box //访问自定义属性值 var id = div.dataset.myid; var name = div.dataset.myname; var pass = div.dataset.mypass; //重置自定义属性值 div.dataset.myid = 66666 div.dataset.myname = zhangsan div.dataset.mypass = zhangsan666 //检测自定义属性 if (div.dataset.myname) { console.log(div.dataset.myname); }虽然上述用法未获得所有浏览器支持,但是我们仍然可以使用这种方式为元素添加自定义属性,然后使用 getAttribute() 方法读取元素附加的信息。
23225.html
CSShtmljavaJavaScript
相关文章
- js书写原生ajax,JS 原生ajax写法
- JS实现前进后退刷新的各种方法
- 用JS获取地址栏url参数的方法_js的url是啥
- 【说站】js中hasOwnProperty的属性用法
- js 长轮询_websocket挂载到vue上
- 高德地图js api教程_高德地图sdk使用教程
- Vue.js – 引入外部 JS 文件
- JS动态设置对象的属性名
- JS获取数组长度(length属性)
- JS filter()方法:根据指定条件过滤数组元素
- JS操作对象属性(获取、添加、删除、修改对象属性)
- JS innerText和outerText属性:读写文本
- Vue.js是什么?它有什么特点?
- JS元素节点及其常用属性和方法
- JS属性节点的操作
- JS document节点及其常用属性和方法
- 测试 Node.js,2018
- js字符编码函数区别分析
- js下用层来实现select的title提示属性
- js返回时间戳所对应的具体时间
- JS模拟面向对象全解(一、类型及传递)
- js监听输入框值的即时变化onpropertychange、oninput
- js用正则表达式控制价格输入实现代码
- ie8.0下显示本地图片的js实现代码img.src
- js获取坐标通过JS得到当前焦点(鼠标)的坐标属性
- JS实现Enter键跳转及控件获得焦点
- JS批量操作CSS属性详细解析
- js如何获取object类型里的键值
- js获取和设置属性的方法
- JS获取网页属性包括宽、高等等
- Node.js的特点和应用场景介绍