合并文本节点normalize()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>合并文本节点normalize()</title>
  <!--
    node.normalize();合并节点node内相邻的文本节点并删除空的文本节点
   -->
</head>
<body>
    <div id="a"></div>
    <script>
      var div=document.getElementById("a");
      var text1=document.createTextNode("我是");
      var text2=document.createTextNode("谁?");
      var text3=document.createTextNode("我就是我");
      div.appendChild(text1);
      div.appendChild(text2);
      div.appendChild(text3);
      console.log(div.childNodes.length);//3,合并前子节点长度
      div.normalize();//将div内的所有节点合并
      console.log(div.childNodes.length);//1,合并后子节点长度
    </script>
</body>
</html>

原文地址:https://www.cnblogs.com/vinson-blog/p/12112765.html

时间: 2024-07-29 13:39:58

合并文本节点normalize()的相关文章

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

1.创建文本节点: <script type="text/javascript"> function addNode(){ var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendC

拆分文本节点splitText()

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

DOM文本节点TEXT

定义 文本节点由Text类型表示,包含的是纯文本内容,纯文本内容中的HTML字符会被转义. 特征 nodeType:3 nodeName:#text nodeValue:节点所包含的文本 parentNode:Element节点 childNode:没有子节点 <div class="box" id="box">test</div> <script> var oBox = document.getElementById('box'

DOM中文本节点索引方法

问题 对于 jquery 接口text()只能取到有标签的 dom对象中 文本内容. 如果索引对象本身就是文本节点,则不好索引到, 没有相关的索引选择器. 例如: 对于<input>aaa 形式的代码, $("input").next().text(), 则不能返回 aaa. 下面有讨论使用jquery索引的方法, 目标是在某个标签下, 找到所有 text node的 对象: http://stackoverflow.com/questions/298750/how-do-

问题:修改文本节点时字符串会经过HTML编码?

今天学JavaScript的DOM时,看到Text属性时,书中有段话: 如果这个文本节点当前存在于文档树中,那么修改文本节点的结果就会立即得到反映.另外,在修改文本节点时还要注意,此时的字符串会经过HTML(或XML,取决于文档类型)编码.换句话说,小于号,大于号或引号都会被转义. 即:div.firstChild.nodeValue = "Some <strong>other</strong> message"; 的输出结果是:"Some <s

初探JavaScript(一)——也谈元素节点、属性节点、文本节点

Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本<Javascript Dom编程艺术>,开始慢慢走近JS,与它套近乎,今天是第三天了,从目前来看,比较好相处.就此动笔,是一个回忆复习的过程,权当是自己的一份读书笔记. JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,已经被广泛用于Web应用开发,常用来为网

[ jquery 文档处理 wrapInner(htm|element|fnl) ] 此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹

此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素 html HTML标记代码字符串,用于动态生成元素并包装目标元素 element 用于包装目标元素的DOM元素 fn 生成包裹结构的一个函数 实例: <html lang='zh-cn'> &l

DOM中元素节点、属性节点、文本节点的理解

转自:http://www.cnblogs.com/dh616854836/archive/2011/08/14/2138038.html 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返回节点的类型. 最重要的节点类型是: 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9 在实际应用中,经常用到的就是元素节点.属性节点和文

JS获取文本节点

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <titl