DOM节点层次之Element类型

最新推荐文章于 2024-07-09 10:38:13 发布

cherry8179

最新推荐文章于 2024-07-09 10:38:13 发布

阅读量111

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/wyc1219/blog/830516

版权

Element节点基本特征：

nodeType:1
nodeName:元素的标签名
nodeValue:null
parentNode:Document或Element

访问元素的标签名：nodeName和tagName效果一样

1.HTML元素

HTML元素是HTMLElement实例或者HTMLElement子类的实例，HTMLElement继承自Element，并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的下列标准特性。

id：元素在文档中的唯一标识符
title：有关元素信息的附加说明信息，一般会通过工具条的提示条显示出来
lang：元素内容的语言代码
dir：语言的方向。“ltr”左到右，“rtl”右到左
className：与元素的class特性相对应，即元素指定的css类。

上面的属性既可以获取，又可以修改。

2.取得特性/设置特性

每个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。

(1)操作特性的方法：getAttribute(),setAttribute(),removeAttribute().针对特性使用（后面说特性和属性的区别）

固有属性：可以通过"."或者getAttribute()访问，设置，如，id，name等DTD/Scheme中定义的属性。
自定义属性：仅能通过"."访问
自定义特性：直接写在标签中，或通过getAttribute访问。

<body>
<p id="wyc" class="wyc">wyc要努力</p>
<script>
    var node = document.getElementById("wyc");
    //获取固有属性
    console.log(node.id);               //wyc
    console.log(node.getAttribute("id"));//wyc
    //设置自定义特性
    node.setAttribute("wp","good");
    console.log(node.getAttribute("wp"));//good
    console.log(node.wp);               //undefined
    //设置自定义属性
    node.haha = "never give up";
    console.log(node.haha);             //never give ip
    console.log(node.getAttribute("haha"));//null
</script>
</body>

看好上面代码，区分特性和属性的访问区别

(2)两个特殊的特性。

style
onclick这种事件处理的

<body>
<p id="wyc" class="wyc" style="color: aqua;" onclick = "test()">wyc要努力</p>
<script>
    function test(){alert(1)};
    var node = document.getElementById("wyc");
    //用属性的方式访问style也可以，但是返回的是对象
    console.log(node.style);//CSSStyleDeclaration {0: "color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: ""…}
    //用特性的方式访问style，返回其中包含的css文本
    console.log(node.getAttribute("style"));    //color: aqua;
    //用属性的方式访问onclick，返回的是一个javascript函数。
    console.log(node.onclick);//function onclick(event) {test()}
    //用特性的方式访问onclick,返回的是特性中字符串“test（）”
    console.log(node.getAttribute("onclick"));//test()
</script>

由上面各种情况知：属性可以返回任意数据类型的数据，而特性只能返回字符串。

removeAttribute()，用于彻底删除元素的特性。不仅删除这个特性的值，而且也会从元素中完全删除特性。

3.attributes属性

只有Element类型使用attributes属性。attributes属性中包含一个NamedNodeMap(与NodeList相似，后面总结三种动态集合)

getNamedItem(name):返回nodeName属性等于name的节点。

removeNamedItem(name):从列表中移除nodeName等于name的节点

setNamedItem(node):向列表中添加节点，以节点的nodeName属性为索引。很不常用

item(pos)：返回位于数字pos处的节点。

<body>
<p id="wyc" class="wyc" style="color: aqua;" onclick = "test()">wyc要努力</p>
<script>
    var node = document.getElementById("wyc");
    var attrs = node.attributes;
    console.log(attrs); //NamedNodeMap {0: id, 1: class, 2: style, 3: onclick, length: 4}
    console.log(attrs["id"]);//id="wyc"
</script>
</body>

补充：

动态集合：是指当DOM结构的变化能够自动反映到所保存的对象中

NodeList:它的成员是节点对象，包括childNodes（动态）和querySelectorAll()方法（静态）返回值，他绝对是动态的
HTMLCollection:也是节点的集合，返回一个类数组对象。但二者有不同之处。NodeList集合主要是Node节点的集合，而HTMLCollection集合主要是Element元素节点的集合。包括getElementsByTagName()、getElementsByClassName()、getElementsByName()等方法的返回值，以及children、document.links、document.forms等元素集合。所有的HTMLCollection对象都是动态的
NamedNodeMap:该对象的常见实例对象是attributes属性

动态带来的问题：

由于是动态的，length是动态变化的，所以添加节点时，会导致死循环（不过也没人会这么玩吧）

<body>
<p id="wyc" class="wyc" style="color: aqua;" onclick = "test()">wyc要努力</p>
<script>
    var ps = document.getElementsByTagName("p");
    for(var i = 0;i < ps.length;i++){
        document.body.appendChild(document.createElement("p"));
    }
</script>
</body>

4.创建元素

document.createElement()方法创建新元素。参数：要创建的标签名。创建之后还需要吧元素添加到文档树中。

转载于:https://my.oschina.net/wyc1219/blog/830516

cherry8179

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM节点层次之Element类型

Element节点基本特征： nodeType:1 nodeName:元素的标签名 nodeValue:null parentNode:Document或Element 访问元素的标签名：nodeName和tagName效果一样 1.HTML元素 HTML元素是...
复制链接

扫一扫