美文网首页
节点属性

节点属性

作者: LOOK_LOOK | 来源:发表于2016-12-23 20:26 被阅读32次

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性:

  1. nodeName : 节点的名称
  1. nodeValue :节点的值
  2. nodeType :节点的类型

一、nodeName 属性:

节点的名称,是只读的。

  1. 元素节点的 nodeName 与标签名相同
  2. 属性节点的 nodeName 是属性的名称
  3. 文本节点的 nodeName 永远是 #text
  4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性:

节点的值

  1. 元素节点的 nodeValue 是 undefined 或 null
  2. 文本节点的 nodeValue 是文本自身
  3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性:

节点的类型,是只读的。
以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

任务

试一试,在<script>的标签内容,获取所有LI标签,并输出相应节点的名称、节点的值、节点的类型。

案例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
  <ul>
     <li>javascript</li>
     <li>HTML/CSS</li>
     <li>jQuery</li>     
  </ul>
  <script type="text/javascript">
    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        var nodename=lis[i].nodeName;
        var nodevalue=lis[i].nodeValue;
        var nodetype=lis[i].nodeType;
        document.write("nodename "+nodename+"<br>nodevalue "+nodevalue+"<br>nodetype "+nodetype+"<br>");
        }
  </script>
</body>
</html>

效果图

效果图

相关文章

  • Neo4j-1.1 CQL-CREATE命令

    创建没有属性的节点 使用属性创建节点 在没有属性的节点之间创建关系 使用属性创建节点之间的关系 为节点或者关系创建...

  • JavaScript常用API合集汇总

    节点 节点属性 节点操作 Document节点 Document节点的属性 Element节点的方法 位置方法 属...

  • Emmet 语法

    孩子节点 > 兄弟节点 + 上级节点 ^ 倍增 * ID属性 # CLASS属性 . 自定义属性 文本 {} 组 ...

  • 3.节点的属性

    1.节点的属性-nodeType 2. 节点的属性 – nodeName、tagName 3.节点的属性 - in...

  • 你知道多少原生JS——DOM节点的属性

    一、节点 1.1 节点属性 1.2 操作 1.3 Document节点 1.3.1 Document节点的属性 1...

  • 08_JS节点属性、日期对象、定时器、String

    节点属性 获取节点属性 getAttribute(属性) 获取属性 通过这个方法,可以得到 某些元素的 ...

  • 节点属性

    在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性: nodeName : 节点的...

  • 节点属性

    1 .nodeType:返回一个整数值,表示节点的类型,还有对应常量可以进行比较来判断节点的类型 2 .nodeN...

  • JS的DOM树总结

    一【DOM树节点】 DOM节点分为三大类:元素节点、文本节点、属性节点 文本节点、属性节点,为元素节点的两个子节点...

  • js常用API

    一、节点 节点属性 节点操作 Document节点 Element节点 对象

网友评论

      本文标题:节点属性

      本文链接:https://www.haomeiwen.com/subject/pmzkvttx.html