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 鼠标放 ...
随机推荐
- Java使用Redisson分布式锁实现原理
本篇文章摘自:https://www.jb51.net/article/149353.htm 由于时间有限,暂未验证 仅先做记录.有大家注意下哈(会尽快抽时间进行验证) 1. 基本用法 添加依赖 &l ...
- 使用tcmalloc替换系统的malloc
https://blog.csdn.net/educast/article/details/79166553?utm_source=blogxgwz0 今天对服务器进行压测,模拟的请求量到4万次/分的 ...
- 如何在PIXI.js里面使用json文件来管理瓦片集(tileset)?
如何在PIXI.js里面使用json文件来管理瓦片集(tileset)? PIXI建议我们将素材图片汇总成一个瓦片集(tileset),然后用纹理地图集(texture atlas,通常是一个json ...
- Android基础知识你知道多少?
https://github.com/zhantong/interview/blob/master/Android/Android.md 四大组件是什么? 四大组件的启动方式? Activity生命周 ...
- Q:链表的中间元素
问题:如何得到一个链表的中间元素? 相信,这个问题对于刚入门编程的人来说,都不会难,最自然而然的想法是先遍历一遍链表,统计链表中的元素的个数,之后,再走一遍链表,所走的步长为链表长度的一半.这样就 ...
- Q:判断链表中是否存在环的相关问题
问题:如何判断一个单向链表中是否存在环? 例如: 链表中存在环(B-->D): <-- <--^ | | v | A-->B-->C-->D 链表中不存在环: A- ...
- call aplly笔记
<script> /*1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两 ...
- css动画笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android RxJava+Retrofit完美封装
作者简介 本篇来自 小河马 的投稿,分享了自己是如何进行 RxJava+Retrofit 的封装.本文的技术点自然没话说,另外对于这种模块化的思路,希望能帮助到大家.最后提前祝大家周末愉快以及圣诞快乐 ...
- 选择 Java 编写 iOS 与 安卓 App的八大理由
[编者按]本文作者为 RoboVM 的 CEO 兼联合创始人 Henric Müller,主要介绍选用 Java 编写移动应用的八大理由.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 在过 ...