初学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时关于文本节点和元素节点的问题。的更多相关文章

  1. javascript中0级DOM和2级DOM事件模型浅析

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  2. javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  3. JavaScript中操作节点

    1.获取节点 1.1.用 getElement 方法获取 获取元素节点时,必须等到DOM树加载完成后才能获取.两种处理方式:(1)将JS写在文档最后:(2)将代码写入window.onload函数中: ...

  4. JavaScript封装函数:获取下一个/上一个兄弟元素节点

    要求: 获得下一个/上一个兄弟元素节点,不包括文本节点等 解决IE兼容性问题 代码实现: 获得下一个兄弟元素节点: function getNextElement(element) { var el ...

  5. JavaScript中操作对象的属性

    1.操作对象的属性 注意: 标签属性与DOM对象属性的相应关系: 绝大部分2者是同样的.如:imgobj.src属性相应<img src="" >中src属性,但也有例 ...

  6. JavaScript中操作数组的方法

    JavaScript Array 对象 对数组操作的方法分为两种 一种是会改变原始数组的变异方法,还有一种是不会改变原始数组的非变异方法. 总结 巧记 Push() 尾部添加 pop() 尾部删除 U ...

  7. 理解JavaScript中BOM和DOM的关系

    JavaScript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,IE和其他的浏览器风格迥异.对象是JavaScript最重要的API,包含 ...

  8. JavaScript 中this与Dom中的注意

    对于下面这段代码: <script type='text/javascript'> function testThis() { console.log(this); } </scri ...

  9. javascript中常用的DOM事件

    //常用事件 onclick 点击事件 onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标抬起 onmouseover 鼠标放上 onmouseout 鼠标放 ...

随机推荐

  1. 解决XShell不能使用小键盘的问题

    新建链接的时候,在Terminal节点,选择VT Modes为set to normal.

  2. JVM GC总结

    判断对象存活 引用计数算法 给对象中添加一个引用计数器,每当有一个地方引用它时,计数器就加1,引用失效时,计数器就减1:任何时刻计数器都为0的对象就是不可能再被使用的. 问题:无法解决对象之间的相互循 ...

  3. Java基础——JDBC

    今天学习的内容是:JDBC 通常jdbc连接分6步: 1)注册驱动: 2)建立连接: 3)创建Statement: 4)执行sql 语句: 5)处理结果集(若sql 语句为查询语句): 6)关闭连接. ...

  4. 【代码笔记】iOS-gif图片播放

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  5. react知识点汇总

    ①uncontrolComponent & controlComponent If your form is incredibly simple in terms of UI feedback ...

  6. egg.js连接和使用Mongodb

    一.Egg连接Mongodb方法一   Cnpm i egg-momgo-native --save Plugin.js中配置 exports.mongo = { enable: true, pack ...

  7. FFmpeg实现将图片转换为视频

    ##名称:ffmpeg实现将图片转换为视频 ##平台:ubuntu(已经安装好了ffmpeg工具) ##日期:2017年12月10日 简介: 因为学习需要,需要将连续图片转换成视频,昨天和今天早上用o ...

  8. 如何利用API导出带有页眉页脚的excel

     在报表中设置的页眉页脚在页面中是看不到的,如下图: 页面中的效果: 在打印的时候,可以看到页眉页脚的效果: 那么,如果将页眉页脚导入到导出的excel中呢.我们可以通过API来进行设置: < ...

  9. 线程间的通信方式2--管道流Pipes

    “管道”是java.io包的一部分.它是Java的特性,而不是Android特有的.一条“管道”为两个线程建立一个单向的通道.生产者负责写数据,消费者负责读取数据. 下面是一个使用管道流进行通信的例子 ...

  10. redis 命令行查看修改配置文件项、配置文件说明

    命令行查看修改配置文件项 config get | config set | config rewrite config get requirepass // 获取密码config set requi ...