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

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. WinForm textbox 全选

    原地址:忘了 textBox1.KeyPress += anyTextBox_KeyPress; private void anyTextBox_KeyPress(object sender, Sys ...

  2. 吴裕雄 python神经网络 花朵图片识别（9）

    import osimport numpy as npimport matplotlib.pyplot as pltfrom PIL import Image, ImageChopsfrom skim ...

  3. Winform 事件

    事件参数:object sender - 事件主体EventArgs e - 事件数据函数体 - 我进行的操作 常用事件:点击事件click (1)Load事件:该事件在窗体加载到内存时发生,即在第一 ...

  4. java 集成友盟推送

    原文:https://blog.csdn.net/Athena072213/article/details/83414743 最近应公司业务需求需要完善友盟推送,认真看了官方文档后其实很简单,只需要细 ...

  5. Centos7 安装 erlang rabbitmq

    1.安装Erlang依赖采用官网的rpm包的形式进行安装,不采用yum(由系统进行自动安装 可能因为版本低的问题而出现一系列问题) erlang依赖 rpm包下载地址https://github.co ...

  6. MQ中间件死信队列深度不断增加问题解决案例

    感谢作者: http://www.wo81.com/tec/mid/mq/2014-04-14/94.html  MQ中间件死信队列深度不断增加问题解决案例 ❞ ☜ ☞ 作者:彭新 日期:2014-0 ...

  7. display:none和visibility:hidden

    display:none和visibility:hidden的区别在哪儿? “这个问题简单?”我心里头暗自得意,按耐住自己得意又紧张的小心脏,自信满满地说,“这两个声明都可以让元素隐藏,不同之处在于d ...

  8. 顺时针打印矩阵(python)

    题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数 ...

  9. 条件编译ifndef、ifdef、endif

    1.条件编译命令最常见的形式为: #ifdef 标识符 程序段1 #else 程序段2 #endif 当标识符已经被定义过(一般是用#define命令定义),则对程序段1进行编译,否则编译程序段2.  ...

  10. Driver stacktrace: at org.apache.spark.scheduler.DAGScheduler.org$apache$spark$scheduler$DAGSchedul

    在写Spark程序是遇到问题 Driver stacktrace: at org.apache.spark.scheduler.DAGScheduler.orgapacheapachesparksch ...