首页vns威尼斯城官网登入 › 某天代码复查时,vns威尼斯城官网登入:某节点元素.

某天代码复查时,vns威尼斯城官网登入:某节点元素.

返本求源——DOM元素的特性与属性

2015/09/06 · HTML5,
JavaScript ·
DOM

原文出处: 木的树   

抛砖引玉

很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr、prop。某天代码复查时,见到一段为某节点设置文本的代码:

JavaScript

attr.set(node, 'innerText', 'Hello World!')

1
attr.set(node, 'innerText', 'Hello World!')

这段代码执行后并未生效,虽说innerText不是标准属性,尚未被ff支持,可用的是chrome,这个属性是被支持的。既然显示的文本没变,那就查看一下元素吧。
vns威尼斯城官网登入 1

innerText被添加到了html标签上,而换成prop模块后,成功的为节点替换文本。

以上的这个小案例就涉及到了DOM操作时常常被忽略的一个问题:特性与属性的区别

返本求源

在DOM中,特性指的是html标签上的属性,比如:

vns威尼斯城官网登入 2

Property是对于某一类型特征的描述。可以这样理解,在DOM元素中可以通过点语法访问,又不是标准特性的都可以成为属性。

DOM中所有的节点都实现了Node接口。Node接口是在DOM1级中定义的,其中定义了一些用来描述DOM节点的属性和操作方法。

vns威尼斯城官网登入 3

常见的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等)都属于Node接口定义的属性。对于Node接口的具体实现者,HTMLElement不仅继承了这些属性,还拥有五个wac规范中的五个标准特性:id、title、lang、dir、class和一个属性:attributes。

每一个元素都有一个或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。通过DOM元素直接操作特性的的方法有三个:

  • getAttribute(attrName)
  • setAttribute(attrName, value)
  • removeAttribute(name)

这三个方法都可以操作自定义特性。但是只有公认的(非自定义)特性才会以属性的形式添加到DOM对象中,以属性方式操作这些特性会被同步到html标签中。HTMLElement的五个特性都有相应属性与其对待:id、title、lang、dir、className。在DOM中以属性方式操作这几个特性会同步到html标签中。

不过,HTML5规范对自定义特性做了增强,只要自定义特性以”data-attrName”的形式写入到html标签中,在DOM属性中就可以通过element.dataset.attrName的形式来访问自定义特性,如:

XHTML

<input type=​"text" name=​"as_q" class=​"box"
id=​"searched_content" title=​"在此输入搜索内容。" disabled=​"false"
data-ff=​"fsdf">​ seh.dataset.ff

1
2
<input type=​"text" name=​"as_q" class=​"box" id=​"searched_content" title=​"在此输入搜索内容。" disabled=​"false" data-ff=​"fsdf">​
seh.dataset.ff

元素的特性在DOM中以Attr类型来表示,Attr类型也实现了Node接口。Attr对象有三个属性:name、value、specified。其中,name是特性的名称,value是特性值,specified是一个布尔值,用来指示该特性是否被明确设置。

document.createAttribute方法可以用来创建特性节点。例如,要为元素添加align特性可以使用如下方法:

JavaScript

ar attr = document.createAttribute('align') attr.value = 'left'
seh.setAttributeNode(attr)

1
2
3
ar attr = document.createAttribute('align')
attr.value = 'left'
seh.setAttributeNode(attr)

要将新创建的特性添加到元素上,必须使用元素的setAttributeNode方法。添加特性后,特性会反映在html标签上:

vns威尼斯城官网登入 4

注意,尽管特性节点也实现了Node接口,但特性却不被认为是DOM文档树的一部分。

在所有的DOM节点中attributes属性是Element类型所独有的的属性。从技术角度来说,特性就是存在于元素的attributes属性中的节点。attributes属性属于NamedNodeMap类型的实例。元素的每一个特性节点都保存在NamedNodeMap对象中。NamedNodeMap类型拥有如下方法:

  • getNamedItem(name):返回特性名为name的特性节点
  • removeNamedItem(name):删除特性名为name的特性节点
  • setNamedItem(attr):像元素中添加一个特性节点
  • item(pos):返回位于数组pos处的节点

获取、设置、删除元素节点可以如下方式:

JavaScript

element.attributes.getNamedItem('align') //获取 var attr =
document.createAttribute('align'); attr.value = 'right';
element.attributes.setNamedItem(attr); //添加
element.attributes.removeNamedItem('align'); //删除

1
2
3
4
5
6
7
element.attributes.getNamedItem('align') //获取
 
var attr = document.createAttribute('align');
attr.value = 'right';
element.attributes.setNamedItem(attr); //添加
 
element.attributes.removeNamedItem('align'); //删除

实际应用中并不建议使用特性节点的方式,而getAttribute、setAttribute、removeAttribute方法远比操作特性节点更方便。

DOM、attributes、Attr三者关系应该这么画:

vns威尼斯城官网登入 5

应用总结

基于以上DOM基础知识和实际工作经验,我将特性和属性的区别联系总结如下:

  1. 属性以及公认特性可以通过点语法访问;html5规范中,data-*形式的自定义特性可以通过element.dataset.*的形式来访问,否则用getAttribute
  2. 特性值只能是字符串,而属性值可以是任意JavaScript支持的类型
  3. 几个特殊特性:
    1. style,通过getAttrbute和setAttribute来操作这个特性只能得到或设置字符串;而已属性方式来操作就是在操作CSSStyleDeclaration对象
    2. 事件处理程序,通过特性方式得到和传递的都只是函数字符串;而已属性方式操作的是函数对象
    3. value,对于支持value的元素,最好通过属性方式操作,而且操作不会反映在html标签上
    XHTML

    seh.value = 10 &lt;input type="text" name="as\_q" class="box"
    id="searched\_content" title="在此输入搜索内容。"
    disabled="false" data-ff="fsdf" align="left"&gt;

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f379c97d12396477911-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d12396477911-2">
    2
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f379c97d12396477911-1" class="crayon-line">
    seh.value = 10
    </div>
    <div id="crayon-5b8f379c97d12396477911-2" class="crayon-line crayon-striped-line">
    &lt;input type=&quot;text&quot; name=&quot;as_q&quot; class=&quot;box&quot; id=&quot;searched_content&quot; title=&quot;在此输入搜索内容。&quot; disabled=&quot;false&quot; data-ff=&quot;fsdf&quot; align=&quot;left&quot;&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>

4.  href,通过属性方式设置可以反映到html标签上,但用过点语法和getAttribute能够取到的值并不一定相同


    XHTML

    &lt;a href="/jsref/prop\_checkbox\_tabindex.asp"
    id="tabI"&gt;tabIndex&lt;/a&gt; link.getAttribute('href') //
    "/jsref/prop\_checkbox\_tabindex.asp" link.href //
    "http://www.w3school.com.cn/jsref/prop\_checkbox\_tabindex.asp"

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f379c97d15903857159-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d15903857159-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f379c97d15903857159-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d15903857159-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f379c97d15903857159-5">
    5
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f379c97d15903857159-1" class="crayon-line">
    &lt;a href=&quot;/jsref/prop_checkbox_tabindex.asp&quot; id=&quot;tabI&quot;&gt;tabIndex&lt;/a&gt;
    </div>
    <div id="crayon-5b8f379c97d15903857159-2" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f379c97d15903857159-3" class="crayon-line">
    link.getAttribute('href') // &quot;/jsref/prop_checkbox_tabindex.asp&quot;
    </div>
    <div id="crayon-5b8f379c97d15903857159-4" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f379c97d15903857159-5" class="crayon-line">
    link.href // &quot;http://www.w3school.com.cn/jsref/prop_checkbox_tabindex.asp&quot;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>

5.  disabled和checked,对于支持这两个特性的元素来说,他们在html标签中都是无状态的,只要有独立的标签属性在以点语法访问时就返回true,如果html标签属性不存在,则以点语法访问时就是false


    XHTML

    &lt;input type=​"text" name=​"as\_q" class=​"box"
    id=​"searched\_content" title=​"在此输入搜索内容。"
    disabled=​"false" data-ff=​"fsdf" align=​"left"&gt;​
    seh.disabled // true seh.disabled = false &lt;input type=​"text"
    name=​"as\_q" class=​"box" id=​"searched\_content"
    title=​"在此输入搜索内容。" data-ff=​"fsdf" align=​"left"&gt;​

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f379c97d19172676562-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d19172676562-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f379c97d19172676562-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d19172676562-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f379c97d19172676562-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d19172676562-6">
    6
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f379c97d19172676562-1" class="crayon-line">
    &lt;input type=​&quot;text&quot; name=​&quot;as_q&quot; class=​&quot;box&quot; id=​&quot;searched_content&quot; title=​&quot;在此输入搜索内容。&quot; disabled=​&quot;false&quot; data-ff=​&quot;fsdf&quot; align=​&quot;left&quot;&gt;​
    </div>
    <div id="crayon-5b8f379c97d19172676562-2" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f379c97d19172676562-3" class="crayon-line">
    seh.disabled // true
    </div>
    <div id="crayon-5b8f379c97d19172676562-4" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f379c97d19172676562-5" class="crayon-line">
    seh.disabled = false
    </div>
    <div id="crayon-5b8f379c97d19172676562-6" class="crayon-line crayon-striped-line">
    &lt;input type=​&quot;text&quot; name=​&quot;as_q&quot; class=​&quot;box&quot; id=​&quot;searched_content&quot; title=​&quot;在此输入搜索内容。&quot; data-ff=​&quot;fsdf&quot; align=​&quot;left&quot;&gt;​
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>

1 赞 1 收藏
评论

vns威尼斯城官网登入 6

ele.style.cssText:声明块的文本内容,修改这个属性会直接将标签中的style特性内容改变。
ele.style.length:属性的数量即有具体值的css声明的数量。window.getComputedStyle()返回值为262。
ele.style.parentRule:包含的CSSRule;
ele.style.getPropertyPriority('attr'):返回可选的优先级
ele.style.getPropertyValue('attr'):返回属性值
ele.style.item(idx):返回属性名,有具体的值的返回属性名,没有具体值的返回""
ele.style.removeProperty():删除的属性,会直接反映到HTML文档中元素style特性节点。返回""
ele.style.setProperty('attr','value','priority'):设置属性,eg: document.body.style.setProperty('color','red','important') 
(b).on事件属性:以onclick为例,在元素上使用时,onclick特性中包含的是JavaScript代码,但通过getAttribute()访问返回相应代码的字符串。在访问onclick属性时会返回一个JavaScript函数(当onclick属性上不存在函数对象且未在元素标签中指定相应特性(为什么说不是属性是因为如果在ele上没有找到onclick属性那就去标签中找onclick特性值)返回null)。由于存在这些差异,在通过JavaScript以编程方式操作DOM时建议使用onclick属性值,只有在取得自定义特性值的情况下才通过getAttribute()访问。
当一个元素标签中既有onclick特性,同时给ele.onclick指定函数(这操作并不会影响原来标签中onclick特性的值),则最后只执行ele.onclick属性的函数。
vns威尼斯城官网登入 7
并且通过getAttribute访问仍得到的是标签上的特性值,且即使之前已经给onclick属性赋值了但控制台显示元素自身并没有这个属性。我不明白为什么document.body自身上会没有onclick属性,那当访问document.body.onclick时候去哪访问onclick的值,按着原型链吗?如果函数是在原型链上的onclick属性上也不应该啊HTMLElement.prototype.onclick=function(){console.log(2)}这样不就使这个方法成共享的了任何HTML元素实例都能访问,这显然不实际因为我们只想为某一元素设置某事件函数。对于document.body自身上会没有onclick属性不知道是不是JS引擎内部实现的,如果是那具体是怎么实现的?知道的盆友麻烦告知~

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      function outputAttributes(obj){
        var arr = [],
          attrName,
          attrValue,
          i;
        for(i = 0; i < obj.attributes.length; i++){
          attrName = obj.attributes[i].nodeName;
          attrValue = obj.attributes[i].nodeValue;
          arr.push(attrName + '=\"' + attrValue + '\"');
        }
        return arr.join(" ");
      }
      var oTest = document.getElementById('test');
      console.log(oTest.attributes);//NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4}
      console.log(typeof oTest.attributes);//object
      console.log(outputAttributes(oTest));
      //class="wrapper" id="test" for="nice" style="background:#f0f;height: 100px;"
      console.log(typeof outputAttributes(oTest));//string
    </script>

归并方法

arr.reduce(function(){},initValue);               //迭代数组所有项,构建一个返回值,从数组第一项开始
arr.reduceRight(function(){},initValue);          //迭代数组所有项,构建一个返回值,从数组最后一项开始
function(prev,cur,index,array){}                    //参数函数,四个参数:前一个值(由前一次函数结果来确定),当前值,项的索引,数组对象
initValue                                                       //可选

注:<=IE7中,setAtttribute()存在一些异常行为不但通过setAttribute()设置元素基本特性或事件特性没用而且通过点赋值法设置元素属性也不会反应到元素标签中。尽管到IE8才解决这个bug,但还是推荐用点赋值法设置特性。
removeAttribute():继承自Element.prototype,可以彻底删除元素特性,不仅会清除特性值还会从元素中完全删除特性。该方法不常用,但在序列化DOM元素时,可以通过它来确切指定要包含哪些特性。

  关于文本节点,遇到最多的兼容问题是空白文本节点问题。IE8及以下浏览器不识别空白文本节点,而其他浏览器会识别空白文本节点
;所以有时候我们需要清理空白文本节点;

Text类型

包含的是纯文本内容,可以包含转义后的HTML字符,通过nodeValue或data获得文本内容

操作节点中文本的方法:

  • appendData(text):将text添加到节点末尾
  • deleteData(offset,count):从offset指定的位置开始删除count个字符
  • insertData(offset,text):从offset指定位置开始插入text文本
  • replaceData(offset,count,text):从offset指定位置开始的count字符替换为text
  • splitText(offset):从offset开始将文本分成两个节点
  • subStringData(offset,count):提取从offset开始到offset+count为止的字符串
  • length属性,保存节点中的字符数,nodeValue.length,data.length也保存同样的值
var attr=document.createAttribute('class');
attr.value="as";
attr;// class=​"as"
document.body.attributes.setNamedItem(attr);
document.body.attributes;//NamedNodeMap {0: id, 1: style, 2: aria-hidden, 3: class, length: 4}

  createAttribute(attr) 创建新的属性节点;

DocumentType类型

并不常用,仅有Firefox,Safari,Opera支持。

保存在document.doctype中

attributes属性

<div id="testData">hello world!</div>
    <div id="testWholeText">hello world!</div>
    <script type="text/javascript">
      var oTestData = document.getElementById('testData');
      //第一个和最后一个都是空白文本节点
      console.log(oTestData.firstChild);//"hello world!"  
      console.log(typeof oTestData.firstChild);//object  
      console.log(oTestData.childNodes.length); //1
      console.log(oTestData.firstChild.nodeValue);//"hello world!" 
      console.log(typeof oTestData.firstChild.nodeValue);//string
      console.log(oTestData.firstChild.data);//"hello world!" 
      //文本节点的data属性与nodeValue属性相同,都是 string 类型
      console.log(oTestData.firstChild.data === oTestData.firstChild.nodeValue);//true
      var oTestWholeText = document.getElementById('testWholeText');
      console.log(oTestWholeText.childNodes); //[text]
      console.log(oTestWholeText.childNodes.length); //1
      console.log(oTestWholeText.firstChild.wholeText);//hello world!
      console.log(oTestWholeText.firstChild.data);//hello world!  
      oTestWholeText.firstChild.splitText('or');
      console.log(oTestWholeText.childNodes); //[text, text]
      console.log(oTestWholeText.childNodes.length); //2
      console.log(oTestWholeText.firstChild);//#text
      console.log(oTestWholeText.firstChild.wholeText);//hello world!
      //wholeText属性将当前Text节点与毗邻的Text节点,作为一个整体返回。
      console.log(oTestData.firstChild.length);//12
      console.log(oTestData.firstChild.nodeValue.length);//12
      console.log(oTestData.firstChild.data.length);//12
    </script>

位置方法

arr.indexOf(arg1,arg2);                         //arg1查找的项,arg2查找起点(可选),从头查找,找到返回位置索引(以位置0开始),未找到返回-1
arr.lastIndexOf(arg1,arg2);                    //与indexOf相反的查找方向,参数数量,意义一致
  • 不能设置动态创建的<iframe>元素的name特性
  • 不能通过表单的reset()方法重设动态创建的<input>元素。
  • 动态创建的type特性值为"reset"的<button>元素重设不了表单。
  • 动态创建的一批name相同的单选按钮彼此毫无关系,name值相同的一组单选按钮本来应该用于表示同一选项的不同值,但动态创建的一批这种单选按钮之间却没有这种关系。

  文本节点的操作与字符串的操作方法相当类似。一般地,我们获取文本都用
innerHTML,然后再去字符串的操作方法去操作。

元素子节点

元素的childNodes属性包含了它的所有子节点。

var div=document.createElement('div');
div.id="myNewid";// "myNewid"
div.className="box";// "box"

  文本节点的三个node属性,nodeType:3、nodeName:'#text'、nodeValue:节点所包含的文本,其父节点
parentNode 指向包含该文本节点的元素节点,文本节点没有子节点;

分割文本节点

  • splitText方法,将一个文本节点分为两个

 

  操作属性的方法主要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()四个,可以针对任何属性使用,包括那些以HTMLElement类型属性的形式定义的属性;

DOM

在新元素上设置这些特性只是给它们赋予了相应信息,由于新元素尚未被添加到文档树中,因此设置这些特性不会影响浏览器显示。要把新元素添加到文档树中,可使用appendChild(),insertBefore(),replaceChild()均继承自Node.prototype。一旦将元素添加到文档树,浏览器就会立即呈现该元素。此后对这个元素所做的任何修改都会实时反映在浏览器中。
在<=IE8中以另一种方式使用createElement,即为这个方法传入完整的元素标签也可以包含属性,document.createElement('<div
id="test"></div>') 。这种方式有助于避开在IE7及更早版本中动态创建元素(document.createElement('div')然后插入叫动态创建)的某些问题,之前存在以下这些问题:

  • 文本节点的 data 属性与 nodeValue 属性相同;
  • wholeText 属性将当前 Text 节点与毗邻的 Text
    节点,作为一个整体返回。大多数情况下,wholeText 属性的返回值,与
    data 属性和 textContent 属性相同;
  • 文本节点的 length 属性保存着节点字符的数目,而且
    nodeValue.length、data.length 也保存着相同的值;   

Document类型

js用以表示文档,是整个文档,不是部分,即document对象

  • document.documentElement属性:指向<html>
  • document.body属性:指向<body>
  • document.doctype:指向<!DOCTYPE>
  • document.title:指向<title>
  • document.URL:页面完整URL
  • document.domain:域名,可设置,同一域
  • document.referrer:保存着链接到当前页的那个页面的URL
document.body.attributes.getNamedItem("id");// id="test"
document.body.attributes[0].nodeName;// "id"
<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4}
      console.log(oTest.attributes.item(1).specified);//true
      console.log(oTest.attributes.getNamedItem('id'));//id='test'
      console.log(typeof oTest.attributes.getNamedItem('id'));//object
      console.log(oTest.attributes.removeNamedItem('for'));//id='test'
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, length: 3}
      var abc = document.createAttribute("abc"); 
      abc.nodeValue = "1234567";
      oTest.attributes.setNamedItem(abc);
      //obj.attributes.setNamedItem(attr) 要先创建属性,在以nodeValue的形式赋属性值,在传入setNamedItem
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, 3: abc, length: 4}
      console.log(oTest.attributes.item(1));//id='test'
      console.log(oTest.attributes[1]);//id='test'
    </script>

创建元素

  • document.createElement():接收一个参数,要创建的元素标签名,在HTML中不区分大小写,在XML区分,创建时也添加了ownerDocument属性

这三个方法都可操作自定义特性,但只有公认的特性才能被应用以属性的形式添加到DOM对象中,以属性方式操作这些特性会被同步到html标签中。HTMLElement的5个特性都有相应属性(意思是Element.prototype或HTMLElement.prototype上的属性可直接通过.形式访问)与其对应:id,title,lang,dir,className。在DOM中以属性方式操作这几个特性会同步到html标签中。因为class特性是这5种特性之一,可以通过className属性访问,xsf特性不在Element.prototype或HTMLElement.prototype对象中有对应属性所以通过属性访问方式获取的值为undefiend。要想访问xsf特性值可以通过getAttribute('xsf')(推荐)或getAttributeNode('xsf').value或attributes["xsf"].value访问。
vns威尼斯城官网登入 8
(2).当然元素还能通过继承HTML某元素Element.prototype上的一些属性,比如input元素的HTMLInputElement.prototype上的disabled可以通过inputele.disabled取得或设置值。inputele.disabled;//
false表示该元素未被设置disabled属性即未被禁用,inputele.disabled=true;//
表示为该元素设置不可用属性。

  childNodes 结合 NodeType 可以检查有几个元素子节点:

队列方法(需和栈方法组合)

arr.shift();                                             //移除数组第一项,并返回被移除项
arr.unshift(arg1,arg2,arg3....);               //在数组前端添加任意项,并返回改变后数组长度

(1).每个元素都有一个或多个特性,这些特性的用途是给相应元素或其内容附加信息。元素继承自Element.prototype上的三个属性,它们的功能是操作特性(不是属性)的方法:

  1. obj.attributes.setNamedItem(attr); 
    向列表中添加节点,该方法无返回值;要先创建属性,在以nodeValue的形式赋属性值,在传入setNamedItem
  2. obj.attributes.getNamedItem(attr);  返回 nodeName 属性等于 attr
    的节点;以" attr=value " 形式返回;
  3. obj.attributes.removeNamedItem(attr); 从列表中移除 nodeName 属性等于
    attr 的节点,并返回该节点;
  4. obj.attributes.item(index); 返回位于下标 index
    位置处的节点,也可以用[]代替, obj.attributes[index];

CDATASection类型

针对XML文档,表示CDATA区域

vns威尼斯城官网登入 9

您可能感兴趣的文章:

  • JavaScript
    DOM节点操作方法总结
  • js操作DOM--添加、删除节点的简单实例
  • JavaScript中对DOM节点的访问、创建、修改、删除
  • javascript获取dom的下一个节点方法
  • javascript 获取HTML
    DOM父、子、临近节点
  • js和jquery对dom节点的操作(创建/追加)
  • js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
  • javascript
    dom操作之cloneNode文本节点克隆使用技巧

Element类型

所有HTML元素都是HTMLElement类型,不然也是通过它的子类型表示。

特性:

  • id:在文档中的唯一标识符
  • title:有关元素附加说明,一般通过工具提示条显示出来
  • lang:元素内容语言代码,很少使用
  • dir:语言方向,tlr(左向右),rlt(右向左),很少使用
  • className:与元素class对应,为元素指定的CSS类

《JavaScript高级程序设计》
反本求源——DOM元素的特性与属性 MDN NamedNodeMap MDN
CSSStyleDeclaration 

   <ul class="list" id="list">
      <li class="in"></li>
      <li class="in"></li>
    </ul>
    <script>
      var oList = document.getElementById('list');
      var children = oList.childNodes;
      var num = 0;
      for(var i = 0; i < children.length; i++){
        if(children[i].nodeType == 1){
          num++;
        }
      }
      console.log(num);//2  有2个元素子节点  
    </script>

Array类型

var arr = [];
arr.length;     //返回数组元素个数

改变length可以动态改变数组大小

  • length:只读,返回映射(map)中对象的数量。
 <script type="text/javascript">
      var oTest = document.getElementById('test');
      oTest.setAttribute('class','aaa'); //setAttribute直接用class就可以了
      oTest.setAttribute('className','bbb');
      console.log(oTest.class);//undefined IE8及以下会报错缺少标识符
      console.log(oTest.getAttribute('class'));//aaa getAttribute直接用class就可以了
      console.log(oTest.className);//aaa
      console.log(oTest.getAttribute('className'));//bbb
      oTest.setAttribute('style','border:1px solid red;height: 100px;'); //setAttribute直接用 style 就可以了
      console.log(oTest.style);//所有的style设置,包括你没有设置的,太多了,肯定不是你想要的
      console.log(oTest.getAttribute('style'));
      //border:1px solid red;height: 100px; getAttribute直接用 style 就可以了
      oTest.setAttribute('for','eee'); //setAttribute直接用for就可以了
      oTest.setAttribute('htmlFor','fff')
      console.log(oTest.for);//undefined  IE8及以下会报错缺少标识符
      console.log(oTest.htmlFor);//undefined
      console.log(oTest.getAttribute('for'));//eee getAttribute直接用for就可以了
      console.log(oTest.getAttribute('htmlFor'));//fff
      console.log(oTest);
      //<div class="aaa" id="test" for="eee" style="ddd" classname="bbb" htmlfor="fff">123</div>
    </script>

Comment类型

注释在DOM中通过Comment类型表示,与Text继承相同基类,拥有除splitText方法的所有字符串操作方法,与Text类似可通过nodeValue和data获得注释内容

设置特性

  其父节点 parentNode 指向包含该元素节点的元素节点 Element 或文档节点
Document;

取得特性

  • getAttribute():注意:传递的特性名与实际特性名相同,因此要得到class特性,要传递"class",而不是"className",也可以取得自定义特性,特性是不区分大小写的注:通常通过对象属性来访问特性,只有取得自定义特性才使用getAttribute方法
  • setAttribute():接收两个参数,要设置的特性名和值。已存在,替换,不存在,创建。设置的特性名会统一转换为小写。
  • removeAttribute():接收特性名。清楚特性值,并删除特性。

目录

  属性节点的三个node属性,nodeType:2、nodeName/name:属性名称、nodeValue/value:属性值;

Node类型

nodetype属性:节点类型,nodeName属性:节点名称,nodeValue属性:节点值

每个节点都有childNodes属性,保存NodeList对象,动态对象,有length属性,可以使用item()方法和方括号法访问。

  • parentNode属性,指向文档树父节点。
  • previousSibling属性:同一列表前一个节点
  • nextSibling属性:同一列表后一个节点
  • firstChild属性:第一个子节点
  • lastChild属性:最后一个子节点
  • ownerDocument属性:指向整个文档的文档节点
  • hasChildNodes(node):在节点包含一个或多个子节点返回true
  • someNode.appendChild(newNode):在最后一个子节点之后加入节点
  • someNode.insertBefore(newNode,node):在参照节点之前插入节点,参照节点为null,结果与appendChild方法一致
  • someNode.replaceChild(newNode,node):替换节点
  • someNode.removeChild(node):移除节点
  • someNode.cloneNode(Boolean):复制,true深复制,复制这个节点及子树,false浅复制,只复制本节点
  • normalize();处理文档树中的文本节点,合并用的

(4).item(pos):返回位于数字pos位置处的特性节点。 

 <div class="wrapper" id='test' for="nice" style="width:200px;height:100px;background:#f0f">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      //IE6/IE7不支持hasAttribute方法
      console.log(oTest.hasAttribute('class'));//true
      console.log(oTest.hasAttribute('className'));//false  
      console.log(oTest.hasAttribute('id'));//true
      console.log(oTest.hasAttribute('style'));//true
      console.log(oTest.hasAttribute('for'));//true
      console.log(oTest.hasAttribute('htmlFor'));//false
    </script>

查找元素

  • getElementById:接收一个参数,要取得的元素的ID,严格按照大小写匹配,多个id相同,返回第一个元素
  • getElementByTagName:接受一个参数,要取得的元素标签名,返回NodeList,在HTML文档中返回HTMLCollection对象,动态集合,可以使用item()方法或方括号法访问元素。
  • HTMLCollection对象,还有一个方法,namedItem,可以使用这个方法通过元素的name特性取得集合中的项。
  • getElementsByName():HTMLCollection类型才有的方法。返回给定name特性的所有元素

Element类型用于表现XML或HTML元素,提供对元素标签名,子节点及特性的访问。原型链的继承关系为
某节点元素.__proto__->(HTML某元素Element.prototype)->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype。
以HTML元素为例:document.documentElement.__proto__->HTMLHtmlElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype
vns威尼斯城官网登入 10
vns威尼斯城官网登入 11

  • obj.removeAttribute(attr)方法用于彻底删除元素的属性,这个方法不仅会彻底删除元素的属性值,还会删除元素属性。该方法无返回值;

特殊集合

都是HTMLCollection对象

  • document.anchors:所有带有name特性的<a>
  • document.applets:所有<applets>
  • document.forms:所有<form>
  • document.images:所有<img>
  • document.links:所有带href的<a>

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=3630

上一篇:

下一篇:

相关文章