HTML DOM Attribute 对象

最新推荐文章于 2024-07-29 09:13:18 发布

chuosaomeng9354

最新推荐文章于 2024-07-29 09:13:18 发布

阅读量113

点赞数

原文链接：https://my.oschina.net/xiaojunx/blog/711339

版权

本文深入解析了DOM中各种属性操作的方法，包括如何判断属性类型、获取属性名与值、设置和删除属性，以及如何利用这些操作提升网页动态效果。通过实际代码示例，读者可以学习到如何使用JavaScript对HTML元素的属性进行高效管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

att.isId //如果属性是id类型则返回true，否则返回false

语法：attribute.isId
例：
<p id="demo" >这是一个标签</p>
<input type="button" value="确定" onclick="fun()">

function fun(){
    var x=document.getElementById("demo");
    x.innerHTML= x.attributes[0].isId;
}
//结果是undefined

att.name //返回属性的名称

语法：attribute.name
例：
<p id="demo" >这是一个标签</p>
<input type="button" value="确定" onclick="fun()">

function fun(){
   var inp=document.getElementsByTagName("input")[0];
   var x=document.getElementById("demo");
   x.innerHTML=inp.attributes[0].name;
}
//结果是 type

att.value //设置或返回属性的值。

语法:
返回属性值：attribute.value
设置属性值：attribute.value=value
例：
<p id="demo" style="color:red;">这是一个标签</p>
<input type="button" value="确定" onclick="fun()">

function fun(){
    var z=document.getElementsByName("p")[0];
    z.getAttributeNode("style").value="color:green";
}

att.specified //如果已指定属性，则返回 true，否则返回 false。

例：
<p id="demo" style="color:red;">这是一个标签</p>
<input type="button" value="确定" onclick="fun()">

function fun(){
    var inp=document.getElementsByTagName("input")[0];
    var x=document.getElementById("demo");
    x.innerHTML=inp.getAttributeNode("type").specified;
}

nodemap.length //返回NamedNodeMap中的节点数

例：
<p id="demo" style="color:red;">这是一个标签</p>
<input type="button" value="确定" onclick="fun()">

function fun(){
	var inp=document.getElementsByTagName("input")[0].attributes;
	var x=document.getElementById("demo");
	x.innerHTML=inp.length;
}

removeNamedItem //删除指定的节点

例：
<input type="button" value="OK">
<p id="demo" style="color:red;">这是一个标签</p>
<button onclick="fun()">确定</button>

function fun(){
    var x=document.getElementsByTagName("input")[0];
    x.attritudes.removeNamedItem("type");
}

attr.appendChild()

属性没有子节点。

setNamedItem //设置指定的属性

<h1>Hello World</h1>
<p id="demo">请点击按钮，将 H1 的 class 属性设置为 "democlass"。</p>
<button onclick="myFunction()">试一下</button>

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

getNamedItem //返回指定的属性节点

<p id="demo">点击按钮来获得 button 元素的 onclick 属性值。</p>
<button onclick="myFunction()">试一下</button>

functiion myFunction(){
      var btn=document.getElementsByTagName("button")[0];
      var x=document.getElementById("demo");
      x.innerHTML=btn.attributes.getNamedItem("onclick").textConter;
}

转载于:https://my.oschina.net/xiaojunx/blog/711339