专栏首页前端说吧JS-节点属性(常用!)

JS-节点属性(常用!)

(开始很生疏,不想看的知识点,后来DOM中用的特别多,才发现很重要。还有几个点,是比较容易忽略的,值得注意!)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS-节点属性</title>
	</head>
	<body>
		<h1>节点属性</h1>
在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :<br/>
1. nodeName : 节点的名称<br/>
2. nodeValue :节点的值<br/>
3. nodeType :节点的类型<br/>
一、nodeName 属性: 节点的名称,是只读的。<br/>
1. 元素节点的 nodeName 与标签名相同<br/>
2. 属性节点的 nodeName 是属性的名称<br/>
3. 文本节点的 nodeName 永远是 #text<br/>
4. 文档节点的 nodeName 永远是 #document<br/>
二、nodeValue 属性:节点的值<br/>
1. 元素节点的 nodeValue 是 undefined 或 null<br/>
2. 文本节点的 nodeValue 是文本自身<br/>
3. 属性节点的 nodeValue 是属性的值<br/>
三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:<br/>
元素类型    节点类型<br/>
  !元素          1<br/>
      属性          2<br/>
  !文本          3&nbsp;空格也是返回3<br/>
      注释          8<br/>
      文档          9<br/>
      <h1>注意空格!!!!</h1>
      <hr color="red" />
  <h1>实验</h1>
    <ul>
     <li>javascript</li>
     <li>HTML/CSS</li>
     <li>jQuery</li>     
  </ul>
  <script type="text/javascript">
  var m = document.getElementsByTagName("li");
  for(var i=0;i<m.length;i++){
    //   document.write(m[i].nodeType);
      switch(m[i].nodeType){
        case 1:
            document.write("1:li节点的类型—【元素】—<br/>");
            break;
        case 2:
            document.write("1:li节点的类型—【属性】—<br/>");
        break;
        case 3:
            document.write("1:li节点的类型—【文本】—<br/>");
        break;
        case 8:
            document.write("1:li节点的类型—【注释】—<br/>");
        break;
        case 9:
            document.write("1:li节点的类型—【文档】—<br/>");
        break;
      }
 
        document.write("2:li里边的文本内容——"+m[i].nodeValue+"<br/>");
        document.write("3:li节点的名称——"+m[i].nodeName+"<br/>");
        document.write("<hr/>");
        }
 
  </script>
	</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS - 二叉树算法实现与遍历 (更新中...)

    xing.org1^
  • JS-Math对象

    xing.org1^
  • Css中Position定位属性与层级关系

    xing.org1^
  • 是加密收藏品吗?以太坊的下一个杀手级应用在进程之中

    尽管听起来很傻,但流行的CryptoKitties应用可能会给以太坊的数字收藏品提供一个强有力的新用途。 在上周推出后,CryptoKitties很快成为最受欢...

    企鹅号小编
  • 作为程序员,难道你心里没点“B树”?

    顺序存储的特点是各个存储单位在逻辑和物理内存上都是相邻的,典型的就是代表就是数组,物理地址相邻因此我们可以通过下标很快的检索出一个元素

    xcbeyond
  • 从概念到实践,我们该如何构建自动微分库

    选自Medium 作者:Maciej Kula 机器之心编译 参与:程耀彤、蒋思源 像 PyTorch 或 TensorFlow 这样通用的自动微分框架是非常有...

    企鹅号小编
  • 「走进k8s」Kubernetes1.15.1的持久化存储PV(31)

    https://kubernetes.io/docs/concepts/storage/persistent-volumes/

    IT故事会
  • 详解 React 16 的 Diff 策略

    这是我 Deep In React 系列的第二篇文章,如果还没有读过的强烈建议你先读第一篇:详谈 React Fiber 架构(1)。

    Nealyang
  • 详解 React 16 的 Diff 策略

    这是我 Deep In React 系列的第二篇文章,如果还没有读过的强烈建议你先读第一篇:详谈 React Fiber 架构(1)。

    胡哥有话说
  • 3-Kubernetes进阶架构学习操作与配置

    Q:什么是节点? 答:Kubernetes中节点(node)指的是一个工作机器曾经叫做 minion , 但是需要注意不同的集群中,节点可能是虚拟机也可能是物理...

    WeiyiGeek

扫码关注云+社区

领取腾讯云代金券