DOM - attribute
今天小编给各位分享attribute的知识，文中也会对其通过DOM - attribute和attribute 和 property 的区别是什么等多篇文章进行知识讲解，如果文章内容对您有帮助，别忘了关注本站，现在进入正文！
内容导航：
一、DOM - attribute
Attribute方法
attribute方法一共包含三个：
1.setAttribute( );
2.getAttribute( );
3.removeAttribute( );
功能：都是操作当前元素节点中某个属性。
举个例子：
我们先来看我们之前学的访问和修改的方法：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); //访问 alert(oDiv.title); alert(oDiv.className); //修改 oDiv.title="xxx"; oDiv.className="box666" alert(oDiv.title); alert(oDiv.className); //以上的访问和修改是我们之前学的 }</script> </head> <body> <div id="div1" title="hello" name="world" class="box"></div> </body></html>运行结果如下：
以上是我们之前学的访问和修改的方法
我们的访问和修改方法也可以用attribute来操作：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); //我们可以通过下面的方法来进行访问和修改 //访问 alert(oDiv.getAttribute("id")); alert(oDiv.getAttribute("title")); alert(oDiv.getAttribute("name")); alert(oDiv.getAttribute("class")); //修改 oDiv.setAttribute("id","div666"); oDiv.setAttribute("title","xxx666"); oDiv.setAttribute("name","world666"); oDiv.setAttribute("class","box666"); //查看修改后的 alert(oDiv.getAttribute("id")); alert(oDiv.getAttribute("title")); alert(oDiv.getAttribute("name")); alert(oDiv.getAttribute("class")); }</script> </head> <body> <div id="div1" title="hello" name="world" class="box"></div> </body></html>运行效果如下：
前面四个是没修改的，后面四个是修改完的
这种方法语句这么长，没有我们直接用 . 来进行访问和修改方便，那么这种方法有什么好处呢？
这就要说一下这两种方法的区别了：
1.对于class属性范围区别，点操作是通过className去访问和修改的；但是对于attribute来说直接传入class就可以访问到，如getAttribute( “class” ); 修改也是直接写上class进行修改
2.如果想设置用户自定义的属性，例如我们想给没有写的属性bbb赋予属性值为aaa
如oDiv.bbb=”aaa”; 浏览器并没有添加bbb这个属性
但是如果我们这样设置属性：
oDiv.setAttribute( “xxx”,”yyy” ); 此时浏览器就会添加一个xxx的属性
3.如果我们在写div的时候真的给它赋予一个自定义的属性bbb=”aaa”;时，此时用oDiv.bbb是访问不到的；但是如果我们用oDiv.getAttribute(“bbb”); 此时它就会获取到bbb属性
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); alert(oDiv.bbb); alert(oDiv.getAttribute("bbb")); }</script> </head> <body> <div id="div1" title="hello" name="world" class="box" bbb="aaa" ></div> </body></html>运行结果如下：
可以看出，第一次获取不到，第二次获取到了
4.当然还有最明显的一点就是removeAttribte删除
例如上面的例子中，我们想要删除掉title这个属性可以这样写：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.removeAttribte( “title” ); //删除该属性 }</script> </head> <body> <div id="div1" title="hello" name="world" class="box"></div> </body></html>运行效果如下：
- 写作不易，大家多多关注，谢谢啦-
---web分享，分享的不只是web
一、attribute 和 property 的区别是什么
DOM元素含有的这两个东西，虽然完全不是一回事，但却又紧密联系在一体，不细细体会，还真不好分清。Property-属性，就像C#等高级语言可以.(dot)获取或者设置其值；Attribute-特性，每一个dom元素都有一个attributes属性来存放所有的attribute节点，通过getAttribute()和setAttribute()方法来进行获取和操作。1
上例中div里面的id、name、class还有自定义的customtag都放到了attributes里面，attributes类似数组的容器，名字索引存放的是name=value的attribute的节点，上面的就是
[class="center",name="div1",id="test",customtag="divTest"]
需要获取和设置这些attribute，很简单
document.getElemmentById("test").getAttribute("customtag") //divTest
document.getElemmentById("test").setAttribute("data","11")
document.getElemmentById("test").removeAttribute("data")
Property就是一个属性，如果把DOM元素看成是一个普通的object对象，那么property就是以name=value形式存放在Object中的属性（C#中的类似），操作很简单
elem.gameid = 880; // 添加
console.log( elem.gameid ) // 获取
这两个东西有什么联系和区别呢？
首先，很多attribute节点有一个相应的property属性，如例子中的div元素的id和class既是attribute也有property，不管哪种方式都可以访问和修改,但是对于自定义的attribute节点，或者自定义property，两者就没有关系了,对于IE6-7来说，没有区分attribute和property。具体的讲解可以考attribute和property的区别，很详细。
虽然getAttribute和点号方法都能获取标准属性，但是他们对于某些属性，获取到的值存在差异性，比如href,src,value等
Test Link
var $ = function(id){return document.getElementById(id);};
alert($('link').getAttribute('href'));//#
alert($('link').href);//fullpath/file.html#
alert($('image').getAttribute('src'))//img.png
alert($('image').src)//fullpath/img.png
alert($('ipt').getAttribute('value'))//enter text
alert($('ipt').value)//enter text
$('ipt').value = 5;
alert($('ipt').getAttribute('value'))//enter text
alert($('ipt').value)//5
二、CSS/HTML代码attribute 对象 是什么意思，代表什么
以对象的形式代表了 HTML 元素的标签属性或属性。成员表下面的表格列出了 attribute 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。 标签属性/属性 SHOW:标签属性/属性集合方法标签属性属性描述 expando设置或获取表明是否可对象内创建任意变量的值。 firstChild获取对象的childNodes 集合的第一个子对象的引用。 lastChild获取该对象 childNodes 集合中最后一个子对象的引用。NAMEname设置或获取对象的名称。 nextSibling获取对此对象的下一个兄弟对象的引用。 nodeName获取特定结点类型的名称。 nodeType获取所需结点的类型。 nodeValue设置或获取结点的值。 ownerDocument设置或获取结点关联的 document 对象。 parentNode获取文档层次中的父对象。 previousSibling获取对此对象的上一个兄弟对象的引用。 specified获取是否指定了该属性。 value设置或获取对象的值。注释attribute 对象可通过 attributes 集合访问。一个合法的标签属性或属性可以是应用于该对象的任何动态 HTML (DHTML)属性或事件，或者是扩展属性。此元素在 Microsoft�0�3 Internet Explorer 5.0 的脚本中可用。示例这个例子使用 attribute 对象来创建已指定的属性清单。三、DOM 是什么?
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。
优点和缺点
DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。
DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instruction和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。
关于attribute的问题，通过《CSS/HTML代码attribute 对象 是什么意思，代表什么》、《DOM 是什么?》等文章的解答希望已经帮助到您了！如您想了解更多关于attribute的相关信息，请到本站进行查找！
爱资源吧版权声明：以上文中内容来自网络，如有侵权请联系删除，谢谢。