javascript高级程序设计之文本节点

1、创建文本节点:

 <script type="text/javascript">
        function addNode(){

            var element = document.createElement("div");
            element.className = "message";

            var textNode = document.createTextNode("Hello world!");
            element.appendChild(textNode);

            document.body.appendChild(element);
        }

    </script>

1.1 出现的多个文本子节点情况:

    <script type="text/javascript">
        function addNode(){

            var element = document.createElement("div");
            element.className = "message";

            var textNode = document.createTextNode("Hello world!");
            element.appendChild(textNode);
            //另外一个节点
            var anotherTextNode = document.createTextNode("Yippee!");
            element.appendChild(anotherTextNode);
            //插入到文档body中
            document.body.appendChild(element);
        }

    </script>

2、规范化文本节点:normalize()

    <script type="text/javascript">
        function addNode(){

            var element = document.createElement("div");
            element.className = "message";

            var textNode = document.createTextNode("Hello world!");
            element.appendChild(textNode);
            //新增的另外一个文本节点
            var anotherTextNode = document.createTextNode("Yippee!");
            element.appendChild(anotherTextNode);
            //添加到文档的body元素中
            document.body.appendChild(element);

            alert(element.childNodes.length);  //2

            <span style="color:#ff0000;">element.normalize();//规范化过程</span>
            alert(element.childNodes.length);  //1
            alert(element.firstChild.nodeValue);  //"Hello World!Yippee!"

        }

    </script>

3、分割文本节点:

其效果跟normalize()方法相反:splitText().将一个节点分为两个,即按照指定的位置分割nodeValue值。

    <script type="text/javascript">
        function addNode(){

            var element = document.createElement("div");
            element.className = "message";

            var textNode = document.createTextNode("Hello world!");
            element.appendChild(textNode);

            document.body.appendChild(element);

           <span style="color:#ff0000;"> var newNode = element.firstChild.splitText(5);</span>
            alert(element.firstChild.nodeValue);  //"Hello"
            alert(newNode.nodeValue);             //" world!"
            alert(element.childNodes.length);     //2

        }

    </script>

分割节点是文本节点提取数据的一种常用DOM解析技术。

时间: 09-06

javascript高级程序设计之文本节点的相关文章

javascript高级程序设计 第十四章--表单脚本

javascript高级程序设计 第十四章--表单脚本 在HTML中表单由<form>元素表示,在js中表单对应的是HTMLFormElement类型,这个类型也有很多属性和方法:取得表单元素的引用还是为它添加id特性,用DOM操作来获取表单元素:提交表单:把<input>或<button>元素的type特性设置为"submit",图像按钮把<input>元素的type特性设置为"image",也可以调用submit(

javascript高级程序设计 第十三章--事件

javascript高级程序设计 第十三章--事件js与HTML的交互就是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流:事件流描述的是从页面中接收事件的顺序,IE的是事件冒泡流,Netscape的是事件捕获流,这个两个是完全相反的事件流概念. 事件冒泡:由最具体的元素接收,然后逐级向上传播到更高级的节点,即事件沿DOM树向上传播,直到document对象. 事件捕获:不大具体的节点应该更早接收到事件,相当于沿DOM节点树向下级传播直到事件的实际目标,在浏览器中,是

javascript高级程序设计 第十一章--DOM扩展

javascript高级程序设计 第十一章--DOM扩展DOM最主要的扩展就是选择符API.HTML5和Element Traversal Selectors API:定义了两个方法 querySelector() 和 querySelectorAll(),能够基于CSS选择符从DOM中取得元素.querySelector()方法接收一个CSS选择符,返回该模式匹配的第一个元素,querySelectorAll()接收的参数一样,但是返回NodeList实例: matchesSelector()

JavaScript高级程序设计(第三版)学习,第一次总结

Array类型 var arr = []; arr.length; //返回数组元素个数 改变length可以动态改变数组大小 检测数组 instanceof可以检测某个对象是否是数组,限制:只能是一个网页或一个全局作用域 Array.isArray(arr); //最终确定某个值到底是不是数组,没有限制 转换方法 arr.toString(); //返回由数组每个值的字符串形式拼接而成的以逗号分隔的字符串 arr.valueOf(); //与toString方法一致 arr.toLocalSt

JavaScript高级程序设计48.pdf

设备中的键盘事件 任天堂Wii等设备可以通过键码知道用户按下了哪个键 复合事件 复合事件是DOM3级事件新添加的一类事件,用于处理IME的输入序列.IME(Input Method Editor,输入法编辑器)可以让用户输入在物理键盘上找不到的字符,IME通常需要同时按住多个键,但最终只输入一个字符,有3种复合事件 compositionstart:在IME的文本复合系统打开时触发,表示要开始输入了 compositionupdate:向输入字段插入新字符时触发 compositionend:在

JavaScript高级程序设计35.pdf

遍历 "DOM2级遍历和范围"模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker,两个类型能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作,与DOM兼容的浏览器都可以访问到这些类型的对象,IE不支持DOM遍历 使用以下代码检测浏览器对DOM2级的遍历支持情况: var supportsTraversals=document.implementation.hasFeature("Traversal&q

JavaScript高级程序设计29.pdf

insertAdjacentHTML方法 插入标记最后一个新增的方式是insertAdjacentHTML()方法,它接收两个参数:插入位置和要插入的HTML文本,第一个参数必须是下列值之一: "beforebegin",在当前元素之前插入一个相邻的同辈元素: "afterbegin",在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素: "beforeend",在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子

JavaScript高级程序设计24.pdf

Element类型 Element类型用于表现XML或HTML元素,提供对元素标签名.子节点及特性的访问,它具有以下特征 nodeType的值为1: nodeName的值为元素的标签名: nodeValue的值为null: parentNode可能是Document或Element: 要访问元素的标签名可以使用nodeName属性或者tagName属性,两者返回相同的值 <div id="myDiv"></div> var div=document.getEle

JavaScript高级程序设计38.pdf

比较DOM范围 在有多个范围的情况下,可以使用compareBoundaryPoints()方法来确认这些范围是否有公共的边界,接收两个参数:表示比较方式的常量值和要比较的范围 常量如下 Range.START_TO_START(0):比较第一个范围和第二个范围的起点:Range.START_TO_END(1):比较第一个范围的起点和第二个范围的终点:Range.END_TO_END(2):比较第一个范围和第二个范围的终点:Range.END_TO_START(3):比较第一个范围的终点和第二个

JavaScript高级程序设计26.pdf

DOM操作技术 动态脚本 指得是页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本,跟操作HTML元素一样,创建动态脚本也有2种方式:插入外部文件和直接插入JavaScript代码 var script=document.createElement("script"); script.type="text/javascript"; script.src="client.js"; document.body.appendChild(sc