JS HTML DOM--- Attr 对象

最新推荐文章于 2022-08-23 10:31:09 发布
最新推荐文章于 2022-08-23 10:31:09 发布
阅读量582 收藏
点赞数
分类专栏： JavaScript学习笔记 文章标签： javascript html
原文链接：https://www.w3school.com.cn/jsref/dom_obj_attributes.asp
版权

文章目录

HTML DOM Attr对象

HTML DOM 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

  • 文档本身是文档节点
  • 所有HTML 元素是元素节点
  • 所有HTML 属性是属性节点
  • HTML 元素内的文本是文本节点
  • 注释 是注释节点

Attr 对象

在HTML DOM 中，Attr 对象表示 HTML 属性。

HTML 属性始终属于 HTML 元素。

attr对象属性

在这里插入图片描述

attr.isId

如果属性是 ID 类型，，isId 属性返回 true，否则返回 false。
语法

attribute.isId

返回值：
Boolean ，true|false
DOM版本：
core Level 3
实例
查明属性是否是元素的 ID 属性：

document.getElementById("demo").attributes[0].isId;

结果：

true
浏览器支持

在这里插入图片描述

attr.name

name 属性返回属性的名称。
语法

attribute.name

返回值：
字符串值： 代表属性的名称
DOM 版本：
Core Level 1
实例
返回属性的名称：

document.getElementsByTagName("button")[0].attributes[0].name;

结果：

onclick
浏览器支持

在这里插入图片描述

attr.value

value 属性设置或返回属性的值。
语法

  • 设置属性值：
attribute.value=value
  • 返回属性值：
attribute.value

返回值:
字符串值，代表属性的值
DOM 版本：Core Level 1
实例
返回属性的值：

document.getElementsByTagName("button")[0].attributes[0].value;

结果：

myFunction()

实例 2：
设置属性的值
设置标题元素的 style 属性：

var h=document.getElementsByTagName("H1")[0];
h.getAttributeNode("style").value="color:green";
attr.specified

  • 如果已规定某个属性，specified 属性返回true

  • 如果已创建该属性但尚未添加到元素中，也会返回 true。

  • 否则返回 false。
    语法

attribute.specified

返回值：
Boolean, true|false
DOM 版本
Core Level 1

实例
查明是否已规定某个属性：

document.getElementById("demo").attributes[0].specified;//返回true

NamedNodeMap 对象

在 HTML DOM 中，NamedNodeMap 对象表示元素属性节点的无序集合。

NamedNodeMap 中的节点可通过名称或索引（数字）来访问。

nodemap对象属性

length 属性返回集合中节点的数量。

Node 对象的属性是 NamedNodeMap 对象的实例。
实例
返回 button 元素的属性数：

document.getElementsByTagName("BUTTON")[0].attributes.length;
//结果：
1

浏览器支持
IE Firefox Chrome Safari Opera
所有主流浏览器都支持 length 属性。

注释：在 Internet Explorer 8 以及更早的版本中，属性的 length 属性将返回元素所有可能属性数量。

语法

namednodemap.length

nodemap对象方法

从NameNodeMap返回回指定的属性节点 --nodemap.getNamedItem()

getNamedItem() 方法从 namedNodeMap 中返回具有指定名称的属性节点。
在这里插入图片描述

实例
返回 button 元素的 onclick 属性值：

var btn=document.getElementsByTagName("BUTTON")[0];
btn.attributes.getNamedItem("onclick").textContent;
//结果:myFunction()
浏览器支持

在这里插入图片描述
所有主流浏览器都支持 getNamedItem() 方法。

注释：
Internet Explorer 8 以及更早的版本不支持此方法。

移除指定的属性节点–nodemap.removeNamedItem()

removeNamedItem() 方法删除 namedNodeMap 中带有指定名称的节点。
实例
删除 input 按钮的 type 属性：

var btn=document.getElementsByTagName("INPUT")[0];
btn.attributes.removeNamedItem("type");

在这里插入图片描述

浏览器支持

在这里插入图片描述

IE Firefox Chrome Safari Opera
所有主流浏览器都支持 removeNamedItem() 方法。

注释：在 Internet Explorer 8 以及更早的版本中，当使用 removedNamedItem 方法来删除属性时，此方法会返回该属性，但不会删除该属性。

设置指定的属性节点（通过名称）–nodemap.setNamedItem()

setNamedItem() 方法向 nodeMap 添加指定的节点。

如果此节点已存在，则将替换该节点，并返回被替换的节点，否则返回值是 null。
在这里插入图片描述

实例
设置 H1 的 class 属性：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.democlass{
	color:red;
}
</style>
</head>
<body>

<h1>Hello World</h1>

<p id="demo">请点击按钮，将 H1 的 class 属性设置为 "democlass"。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var h=document.getElementsByTagName("H1")[0];
var typ=document.createAttribute("class");
typ.nodeValue="democlass";
h.attributes.setNamedItem(typ);
}
</script>

</body>
</html>
浏览器支持

在这里插入图片描述

nodemap.item() --返回 NamedNodeMap 中位于指定下标的节点。

语法：

document.getElementsByTagName("BUTTON")[0].attributes.item(0);

下面这条语法产生相同的结果：

document.getElementsByTagName("BUTTON")[0].attributes[0];

实例
返回 button 元素的首个属性的名称：

document.getElementsByTagName("BUTTON")[0].attributes.item(0).nodeName;
//结果：   onclick

浏览器支持

在这里插入图片描述

IE Firefox Chrome Safari Opera
所有浏览器都支持 Attr 对象和 NamedNodeMap 对象。

DOM 4警告！

在 W3C DOM Core 中，Attr (attribute) 对象从 Node 对象继承所有属性和方法。

在 DOM 4 中，Attr 对象不再从 Node 继承。

为了保证未来的代码安全，您应该避免在属性对象上使用节点对象的属性和方法：

在这里插入图片描述
在这里插入图片描述

望望byte
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript DOM 操作基础知识小结
12-11
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]一、DOM基础1.节点(node)层次Document－－最顶层的节点，所有的其他节点都是附属于它的。DocumentType－－DTD引用（使用<!DOCTYPE>语法）的对象表现形式，它不能...
js中attr 与find 获取属性值，
weixin_33691700的博客
06-17 1205
一、attr的用法 1. attr(属性名)        //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ） 2. attr(属性名, 属性值)   //设置属性的值 （为所有匹配的元素设置一个属性值。） 3. attr(属性名,函数值)     //设置属性的函数值  （为所有匹配的...
Javascript高级编程学习笔记（42）—— DOM（8）Attr类型
dazhongshuo1167的博客
01-14 114
Attr类型 我们在之前的文章中提到了，元素有一个 attributes 属性 该属性保存了一个 NamedNodeMap 集合 该集合中的元素也就是今天我们所要记叙的 attr 类型 主要就是方便我们在JS中操作上图中被选出的特性 首先，Attr类型 具有以下特点： 1. nodeType: 2 2. nodeName: 特性名称 3. nodeValue：特...
HTML DOM Attr对象
老狼的专栏
03-07 1249
HTML DOM 节点 在 HTML DOM (Document Object Model) 中, 所有的都是节点： 文档是文档节点 所有 HTML 元素是元素节点 所有 HTML 属性都是属性节点 插入到 HTML 元素中的文本为文本节点 注释是注释节点 Attr 对象 在 HTML DOM 中,Attr 对象代表一个 HTML 属性。 HTML属性总是属于HTML元素。 ...
javascript中的对Attr（dom中属性）操作
haiziguo的专栏
04-30 7049
20120430dom操作属性节点.htm //Attr(属性)虽然是节点 但是不能用firstChild和childNodes等访问 function testBtn() { // var myNode = document.getElementById("btn");//得到element标签
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
01-21
　attr(): 读或者写匹配元素的属性值. 　removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 　attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 　格式: .attr(attributeName),返回值类型:...
jquery-1.1.3 效率提高800%
07-21
// dom element }返回值: jQuery 装入一个远程HTML内容到一个DOM结点。 默认使用get方法发送请求，但如果指定了额外的参数，将会使用post方法发送请求。在 jQuery 1.2中，可以在URL参数中指定一个jQuery...
introduction-to-[removed]课程材料@ PPKE-ITK
05-18
HTML和DOM 查询元素：getElementById，getElementsByClassName等。 创建元素：createElement，createTextNode 操作元素：appendChild，attr，style 事件与事件处理 课03：函数式Javascript -2018.02.28。 作为...
jquery-1.3.2
02-03
1、精准简单的选择对象(dom)： 以下为引用的内容： $('#element');// 相当于document.getElementById("element") $('.element');//Class $('p');//html标签 $("form > input");//子对象 $("div,span,p.myClass");...
js-使用attr()方法
热门推荐
春暖花未开
05-20 2万+
在使用attr()过程中遇到些许问题，总结归纳一下：获取xo标签attribute属性的值$(xo).attr(attribute)设置attribute属性的值为value$(xo).attr(attribute, value)设置多个attribute属性的值value们$(xo).attr({attribute1: value1, attribute2: value2})...
html 中attr属性,在CSS中用attr()显示HTML属性值
weixin_34859739的博客
06-04 3339
attr()功能早在CSS 2.1标准中就已经出现，但现在才开始普遍流行。它提供了一个巧妙的方法在CSS中使用HTML标签上的属性，在很多情况下都能帮你省去了以往需要Javascript处理的过程。要想使用这个功能，你需要用到三种元素：一个:before 或 :after CSS伪类样式， .content属性，和一个带有你想使用的HTML属性名称的attr()表达式。例如，想去显示标题上的dat...
操纵DOM之---attr 获取与设置属性的值
天下无敌庞成勇
11-16 4437
在使用JavaScript编写网页代码的过程中，多数时间都在操纵DOM，比如Ajax返回json数据、动态地向DOM添加显示节点或者是动态地更改页面上元素的CSS和属性等。DOM的全称是Document Object Model，即文档对象模型，是一种与浏览器、平台和语言无关的接口，它可以让用户代码访问任何浏览器中呈现的元素，可以将DOM看作是网页呈现的一种标准。attr 获取与设置属性的值 要
JavaScript中的DOM（二）
m0_51636525的博客
05-20 272
1.元素的特性attribute 标准attribute：某些attribute属性是标准的，比如id、class、href、type、value等； 非标准attribute：某些attribute属性是自定义的，比如age、height等 <div class="box" id="main" name="abc" age="18">hohh</div>  elem.hasAttribute(name) — 检查特性是否存在。  elem.getAttrib.
【JavaScript学习】DOM：Attr类型
Wonder233的学习博客
11-21 644
1、表示元素的特性。在所有浏览器（包括IE8），都可以访问Attr类型的构造函数和原型。 2、特性就是存在于元素的attribute属性中的节点。Attr节点特征 nodeType的值是2； nodeName的值是特性的名称； nodeValue的值是特性的值； parentNode的值为null； 在HTML中不支持（没有）子节点； 在XML中子节点可以是Text或EntityReference
html dom attr,javascript中对Attr(dom中属性)的操作示例讲解
weixin_29582621的博客
06-18 243
20120430dom操作属性节点.htm//Attr(属性)虽然是节点 但是不能用firstChild和childNodes等访问function testBtn() {// var myNode = document.getElementById("btn");//得到element标签// var myNodeName = myNode.nodeName;//得到上述标签的名字为按钮//...
JS批量给元素添加css样式或attr标签
深南大道
04-26 2967
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></...
html()和text()和val()方法、attr()和prop()方法
weixin_46065214的博客
08-23 906
html()和text()和val()方法、attr()和prop()方法
jQuery17(html,attr,removeAttr,动态创建元素)
xbc1213的博客
02-07 516
html,attr,removeAttr方法html方法对应的是Dom中的innerHtml方法,text对应的是Dom中的innerText方法. html方法: 实例:$('div').html('<font color="red">哈哈</font>');注意,如果html中不写的话表明是获取.attr方法: 一般写两个值,属性及属性值.注意.如果是要写true,false.例如attr
jQuery获取html元素的代码
最新发布
05-31
以下是一些使用 jQuery 获取 HTML 元素的示例代码： 1. 获取所有的 `<p>` 元素，并将它们的文本内容输出到控制台： ```js ...$("#myDiv")[0] // 使用数组下标访问 jQuery 对象，返回原生 DOM 对象 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值