JavaScript中操作有些DOM时关于文本节点和元素节点的问题。
初学JavaScript时候,经常遇到需要操作的内容因为文本节点而使操作更麻烦或者不能达到效果。
例:
<ul id="ull">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
//insertBofore
var oul = document.getElementById("ull");
var newli= document.createElement("li");
oul.insertBefore(newli,oul.lastChild);//lastelementChild
alert(oul.childNodes.length);
alert(oul.children.length);
在前面一段简单的代码示例中,假如需要在ul最后添加一个li可以用到inserBefore,但是,我们在获取ul下面最后一个节点的时候,这时候如果用oul.lastChild,则会出现将li添加到最末尾的情况,这是因为lastChild在使用的时候将最后一个文本节点也计算在里面,所以页面效果也是把li添加到li的末尾,当然也可以用相关条件进行控制。而我们用lastElmentChild的时候,是将li添加到ul下面最后一个li前面,就可以避免在计算的时候将文本节点计算在内,从而避免很多不必要的操作。
同理还有一些属性/方法也和lastChild具有相同的特点。
例如:
childNodes--指向所有子节点列表(包括文本节点)
previousSibling--指向前一个兄弟节点,如果该节点为第一个兄弟节点,则返回null(包括文本节点)
hasChildNodes()--当childNodes有一个或者多个子节点时,返回真。(包括文本节点)
等...
JavaScript中操作有些DOM时关于文本节点和元素节点的问题。的更多相关文章
- javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- JavaScript中操作节点
1.获取节点 1.1.用 getElement 方法获取 获取元素节点时,必须等到DOM树加载完成后才能获取.两种处理方式:(1)将JS写在文档最后:(2)将代码写入window.onload函数中: ...
- JavaScript封装函数:获取下一个/上一个兄弟元素节点
要求: 获得下一个/上一个兄弟元素节点,不包括文本节点等 解决IE兼容性问题 代码实现: 获得下一个兄弟元素节点: function getNextElement(element) { var el ...
- JavaScript中操作对象的属性
1.操作对象的属性 注意: 标签属性与DOM对象属性的相应关系: 绝大部分2者是同样的.如:imgobj.src属性相应<img src="" >中src属性,但也有例 ...
- JavaScript中操作数组的方法
JavaScript Array 对象 对数组操作的方法分为两种 一种是会改变原始数组的变异方法,还有一种是不会改变原始数组的非变异方法. 总结 巧记 Push() 尾部添加 pop() 尾部删除 U ...
- 理解JavaScript中BOM和DOM的关系
JavaScript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,IE和其他的浏览器风格迥异.对象是JavaScript最重要的API,包含 ...
- JavaScript 中this与Dom中的注意
对于下面这段代码: <script type='text/javascript'> function testThis() { console.log(this); } </scri ...
- javascript中常用的DOM事件
//常用事件 onclick 点击事件 onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标抬起 onmouseover 鼠标放上 onmouseout 鼠标放 ...
随机推荐
- Jsp&Servlet入门级项目全程实录第8讲
惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 1.添加dao public int studentAdd(Connection con,Student studen ...
- 【转】ArrayBlockingQueue浅析
ArrayBlockingQueue是常用的线程集合,在线程池中也常常被当做任务队列来使用.使用频率特别高.他是维护的是一个循环队列(基于数组实现),循环结构在数据结构中比较常见,但是在源码实现中还是 ...
- java自学-运算符
上一篇介绍了java的变量和数据类型,要对数据处理,还需要用到java运算符,这里只总结下常用的,运算符主要分为以下几类:1 算数运算符 算数运算符包括: + 加法运算 - 减法运算 * 乘法运算 / ...
- [AngularJS] “路由”的定义概念、使用详解——AngularJS学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 AngularJS“路由”的定义概念 AngularJS最近真的很火,很多同事啊同学 ...
- <Android 基础(二十九)> Fragment (2) ~ DialogFragment
简介 上一篇简单的介绍了下Fragment的使用方法,这一篇主要看下DialogFragment. 在android 3.0时被引入.是一种特殊的Fragment,用于在Activity的内容之上展示 ...
- Spring框架学习之概述
一.什么是软件框架 打个比方就像建筑的混凝土框架,搭好了架子,工人只需要把墙填上. .特点: -半成品 -封装了特定的处理流程和控制逻辑 -成熟的,不断升级改造的软件 .框架和类库的区别 -框架一般是 ...
- ubuntu14.04 忘记了登录密码和root密码
由于很久没用自己的ubuntu了,发现刚想用时却忘记了密码,搞了半天终于搞好了,真的.... 在此记录一下自己的新密码:登录密码:1234567:ROOT密码:1234567 下面是整理网上的教程,亲 ...
- Python 3从入门到精通02-python的简单使用
Python 3中的打印语句和字符串使用: Python中的常见数学运算: 这样的简单基础知识,你需要花5分钟就可以了,很基础的东西.
- socat 的神奇使用方式
目的是实现科* 学 * 上*网,现在记录一下流程 先在服务器上安装(比如美国,香港,台湾,马来的云主机)squid,easy_rsa, centos 下可以用yum直接安装 $ yum install ...
- 开源一款私藏Management Studio插件,ProjkyAddin,送给所有使用SQLServer的园友们
ProjkyAddin 是一款Management Studio 插件,安装包才500多kb,兼容SSMS 2005.SSMS 2008.SSMS 2008 R2.SSMS 2012.SSMS 201 ...