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

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. ArcGIS模型构建器案例教程-批量修改工作空间所有要素类的空间参考

    ArcGIS模型构建器案例教程-批量修改工作空间所有要素类的空间参考 目的:批量修改工作空间所有要素类的空间参考(坐标系) 工具名称:WorkspaceChangeSpatialReference 使 ...

  2. C++学习二继承

    转载自https://www.cnblogs.com/33debug/p/6666939.html 1.继承与派生  继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一.简单的说,继承 ...

  3. 百度开放平台连接MySQL数据库

    在百度开放平台创建了MySQL数据库后只知道数据库名称,可以通过下面的方法进行连接: public function connect(){ $_server = getenv('HTTP_BAE_EN ...

  4. Python基础学习Day5 字典的增、删、改、查的用法 分别赋值

    一.字典的介绍 字典:字典是Python的基础数据类型之一:字典可以存储大量数据,关系型数据. 同样是Python中唯一的映射类数据类型.         数据类型的分类:        可变的数据类 ...

  5. vue 路由meta作用及在路由中添加props作用

    vue路由meta:有利于我们处理seo的东西,我们在html中加入meta标签,就是有利于处理seo的东西,搜索引擎 在路由中传参是通过/:id传参代码如下: import Login from ' ...

  6. WeakHashMap<K,V> 中的弱引用

    相信很多人对WeakHashMap并没有完全理解. WeakHashMap 持有的弱引用的 Key. 1. 弱引用的概念: 弱引用是用来描述非必需对象的,被弱引用关联的对象只能生存到下一次垃圾收集发生 ...

  7. html开发环境

    标签(空格分隔): 环境 开发环境: 市面上有很多的HTML编辑器可以选择,常见的Hbuild.Sublime Text.Dreamweare都可以用来开发HTML. 当然PyCharm也支持HTML ...

  8. mysql里max_allowed_packet的作用

    MySQL根据配置文件会限制Server接受的数据包大小.有时候大的插入和更新会受 max_allowed_packet 参数限制,导致写入或者更新失败. 查看目前配置: 代码如下: show VAR ...

  9. Log4j2配置及使用

    Log4j2:一个日志管理工具.Log4j的升级版,需要Java6以上   一.安装log4j2依赖包 1.通过maven的pom.xml直接引入jar: log4j-api和log4j-core & ...

  10. spket插件安装并设置JQuery自动提示(转)

    spket是一个开发JavaScript.jQuery.Ext_js等的开发工具,它可以 是独立的IDE,也可以作为Eclipse的插件使用,下面介绍如何在Eclipse中安装spket插件: 1.首 ...