一、自定义属性值两种方法的注意事项

1、用元素节点.属性(元素节点[属性])绑定的属性值不会出现在标签上。

2、用get/set/removeAttribut(,)等绑定的属性会出现在标签上。且两种方式不能交换使用

二、节点访问关系相关

父节点　　parentNode

兄弟节点

  • nextSibling
  • nextElementSibling
  • previousSibling（前一个）
  • previousElementSibling

子节点

  • firstChild
  • firstElementChild
  • lastChild
  • lastElementChild

所有子节点

  • childNodes
  • children

***自己.parentNode.children[] 可以获取自己的兄弟节点***

有element的是获取节点元素,没有的可以获取任意节点(空格、换行都能获取到)

IE旧版本不支持有element的方法,一般用  ele.firstElementChild || ele.firstChild  方式获取期望的元素节点,且顺序不能调换,否则类如Chrome会获取到一个文本节点

 <body>

     <div id="box">我是一个盒子</div>

     <script>

         var ele = document.getElementById('box');//元素节点

         var att = ele.getAttributeNode('id');//属性节点

         var txt = ele.firstChild;//文本节点

         console.log(ele);   //-->输出 <div id="box">我是一个盒子</div>

         console.log(att);   //-->输出 id="box"

         console.log(txt);   //-->输出 "我是一个盒子"

         console.log(ele.nodeType);  //-->输出 1

         console.log(att.nodeType);  //-->输出 2

         console.log(txt.nodeType);  //-->输出 3

         console.log(ele.nodeName);  //-->输出 div

         console.log(att.nodeName);  //-->输出 id

         console.log(txt.nodeName);  //-->输出 #text

     </script>

 </body>

nodeType值与顺序无关,元素节点是1,属性节点是2,文本节点是3

DOM心得的更多相关文章

  1. jQuery修炼心得-DOM节点的插入

    1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是 ...

  2. 学习Javascript DOM 编程艺术的一点心得

    最近又看了一遍JS DOM编程艺术,照例来写一写读后感. 其实,我从中学到最深的是几个概念:1.平稳退化.当浏览器并不支持JS的时候网页的基本核心功能是还可以用的:2.逐渐增强.在原始的信息层上用其他 ...

  3. jQuery修炼心得-DOM节点的删除

    要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题. 1.empty empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. ...

  4. 安卓版App开发心得

    从2016年4月到6月主要做的工作是网站的开发,而6月到现在2016年8月初,主要做的工作是Android和IOS两种App的开发,又以Android为主. 将这段时间的Android开发心得记录如下 ...

  5. Ajax学习心得

    Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网 ...

  6. AngularJS入门心得4——漫谈指令scope

    上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...

  7. AngularJS入门心得3——HTML的左右手指令

    在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...

  8. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  9. 使用mvvm框架avalon开发公司内部运营管理系统的一些心得

    接触avalon差不多有一年时间了,当时是看前端大牛司徒正美的博客才了解到还有这么一个高大上的玩意,然后就加入了avalon的讨论群.从群里零零散散的了解了avalon的一些特性,感觉很强大,感觉思想 ...

随机推荐

  1. Jsp基本语法 第二章

    今天是星期天,我学习了关于Jsp的一些基本页面元素 首先学习了一些基本页面注释 1.HTML的注释 <!-- htmI注释-->//    客户端可见 2.JSP的注释:  <%-- ...

  2. serclet监听器

    1:监听servlet上下文 2:监听会话 3:监听请求 使用,必须是实现对应的接口,然后在web.xml中配置自己写的监听器的实现类 过滤器之后,servlet之前(有待深入研究) 下一集预告:过滤 ...

  3. quartz整合spring框架service层对象注入为null解决方案

    Job实现类代码 package cn.itcast.quartz; import org.quartz.Job; import org.quartz.JobExecutionContext; imp ...

  4. mysql 数据库必备命令操作，入门练习一下

    mysql 数据库必备命令操作 show databases: 查看所有的数据库: create database jfedu: 创建名为jfedu数据库: use nihao: 进入jfedu数据库 ...

  5. ncat的使用

    由于netcat的缺陷,所以有了升级版ncat,弥补了netcat的一些不足. ncat是nmap工具包的一个工具. 服务器端 ncat -c bash --allow 192.168.1.119 - ...

  6. oracle中case...when的用法

    全表的内容 case...when可以解决在显示的时候想显示别的名称的例子, 用的最多的地方就是性别, 比如上面的表中的性别是由'1'和'0'表示的, 但是实际显示出来在页面上给客户看是不可取的, 这 ...

  7. HTTP/1.1新建会话失败 解决方法及分析

    右键我的电脑—>属性—>点击高级项卡—>设置性能,在性能选项中选择高级选项卡,在虚拟内存处显示“所有驱动器文件大小的总数:0M”,原来问题出在这里,由于操作系统的分页内存太小,而引起 ...

  8. Win7下VB6.0不能加载mscomctl.ocx的解决办法

    下载这个:http://pan.baidu.com/s/1sjJgrbJ 然后在命令框下注册这个组件: regsvr32 mscomctl.ocx 即可

  9. :after伪类+content经典应用举例

    :after伪类+content 清除浮动的影响 .box{padding:10px; background:gray;} .l{float:left;} <div class="bo ...

  10. kafka NoNode错误

    报错 bin/kafka-run-class.sh kafka.tools.ConsumerOffsetChecker --zookeeper localhost:2181 --group=app-t ...