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

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. Win8系统本地连接显示为网络2

    Win8系统中,当改变了网络环境,本地连接就会被识别为网络2,网络3等: 如果在一个固定的网络环境中,需要修改此名称,可以打开注册表: [HKEY_LOCAL_MACHINE\SOFTWARE\Mic ...

  2. windows 允许空密码登陆

    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Lsa  这个注册表键值下的limitblankpassworduse项 修改为0或者1

  3. 使用yii\filters下的比如\PageCache需要在web.php里面的组件上配置'cache' => [ 'class' => 'yii\caching\FileCache', ],

    public function behaviors(){ /*需要在config文件下的web.php里面加上 'cache' => [ 'class' => 'yii\caching\F ...

  4. c 语言的复杂声明

    简化的声明语法: dcl: optional *'s direct-dcl direct-dcl: name (dcl)  direct-dcl() direct-dcl[optional size] ...

  5. destructuring assignment

    [destructuring assignment] The destructuring assignment syntax is a JavaScript expression that makes ...

  6. 使用ddns搭建免费服务器

    [使用ddns搭建免费服务器] 第一步 tplink路由器提供了ddns服务,它为用户免费提供一个子tpddns.cn下的子域名,映射到你的路由器上.当启用后,只在要能接入互联网的地方,都能过此域名, ...

  7. MVC005之页面调用控制器中的方法

    描述:控制器在传给页面数据时,有时我们需要对传过来的数据进行二次处理 如: 1:传过来部门编码,但页面上要显示为部门名称 2:格式转换等 我们在写aspx时一般在cs文件中写一个protected的方 ...

  8. JMeter学习（十五）JMeter测试Java（转载）

    转载自 http://www.cnblogs.com/yangxia-test 目的:对Java程序进行测试 目录 一.核心步骤 二.实例 三.JMeter Java Sampler介绍 四.自带Ja ...

  9. jQuery 替换元素

    参考https://www.cnblogs.com/halai/p/6868027.html http://www.w3school.com.cn/jquery/manipulation_replac ...

  10. centos 6.9 +nginx 配置GIT HTTPS服务器（证书采用自签名）

    第一部分原通过SSH访问的GIT服务器迁移 1.把原服务器GIT资源库目录完成复制至新的服务器 2.安装GIT服务器 新的服务器 创建用户 useradd git password git 下载GIT ...