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

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. (转).NET Core 使用 log4net

    https://blog.csdn.net/liyazhen2011/article/details/83382221 1.安装log4net     建立.NET Core工程 - 右键 - 管理N ...

  2. winform clickonce在线安装

    转 http://swanmsg.blog.sohu.com/162994305.html

  3. JS计算滚动条的宽度

    1.此方法检验成功 function getScrollbarWidth() { var oP = document.createElement('p'), styles = { width: '10 ...

  4. 吴裕雄 python 机器学习-KNN算法（1）

    import numpy as np import operator as op from os import listdir def classify0(inX, dataSet, labels, ...

  5. BN和滑动平均

    BN目的是使得每层训练的输出结果在同一分布下,实验证明不仅可以加速收敛速度,还可以提高准确度 因为如果想要计算所有图像的均值与方差,显然不太现实,所以每次计算每个batch的方差与均值,为了使得每个b ...

  6. http协议解析过程

    HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统. 基于HTTP协议的客户端/服务器请求响应机制的信息交换过程包含下面几个步骤: 1)     建立连接:客 ...

  7. Java字节流Stream的使用，创建方法

    首先:FileOutputStream写入数据文件 学习父类的方法 使用子类的对象 步骤: 1:子类中的构造方法   作用  :绑定输出的目的地 FileOutputStream fos= new F ...

  8. 使用Js控制ReactRouter路由

    [使用Js控制ReactRouter路由] 首先引入PropTypes: const PropTypes = require('prop-types'); 然后定义context的router属性: ...

  9. Hibernate框架学习笔记

      Hibernate 是一个 JDO( Java Data Objects)工具.它的工作原理是通过文件把值对象(Java对象)和 数据库表之间建立起一个映射关系,还提供数据查询和获取数据的方法. ...

  10. selector的例子

    例子1 文件名:sl_rounded_rectangle_button_picture.xml 文件内容: <?xml version="1.0" encoding=&quo ...