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 条评论
登录 后参与评论

相关文章

来自专栏前端桃园

知识体系解决迷茫的你

最近在星球里群里都有小伙伴说道自己对未来的路比较迷茫,一旦闲下来就不知道自己改干啥,今天我这篇文章就是让你觉得一天给你 25 个小时你都不够用,觉得睡觉都是浪费...

22440
来自专栏腾讯社交用户体验设计

ISUX Xcube智能一键生成H5

51620
来自专栏微信公众号:小白课代表

不只是软件,在线也可以免费下载百度文库了。

不管是学生,还是职场员工,下载各种文档几乎是不可避免的,各种XXX.docx,XXX.pptx更是家常便饭,人们最常用的就是百度文库,豆丁文库,道客巴巴这些下载...

44830
来自专栏钱塘大数据

中国互联网协会发布:《2018中国互联网发展报告》

在2018中国互联网大会闭幕论坛上,中国互联网协会正式发布《中国互联网发展报告2018》(以下简称《报告》)。《中国互联网发展报告》是由中国互联网协会与中国互联...

13750
来自专栏怀英的自我修炼

考研英语-1-导学

英二图表作文要重视。总体而言,英语一会比英语二难点。不过就写作而言,英语二会比英语一有难度,毕竟图表作文并不好写。

12310
来自专栏钱塘大数据

理工男图解零维到十维空间,烧脑已过度,受不了啦!

让我们从一个点开始,和我们几何意义上的点一样,它没有大小、没有维度。它只是被想象出来的、作为标志一个位置的点。它什么也没有,空间、时间通通不存在,这就是零维度。

35230
来自专栏FSociety

SQL中GROUP BY用法示例

GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

5.2K20
来自专栏Ken的杂谈

【系统设置】CentOS 修改机器名

18430
来自专栏haifeiWu与他朋友们的专栏

复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

30540
来自专栏腾讯高校合作

【倒计时7天】2018教育部-腾讯公司产学合作协同育人项目申请即将截止!

16220

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励