zoukankan      html  css  js  c++  java
  • javascript之DOM(四其他类型)

    一、Text类型

    文本节点由Text类型表示,指的是可以以字面意思解释的纯文本内容,其中包含HTML代码。

    nodeType=3

    nodeName=#text

    nodeValue=文本内容

    parentNode是一个Element

    nodeValue属性和data属性作用一致,都可以访问文本节点的内容

    操作文本节点的内容:

    appendData(text);//将text添加到节点的末尾

    deleteData(Offset,count);//从Offset位置开始删除count个字符

    insertData(Offset,text);//在Offset位置插入text

    replaceData(Offset,count,text);//用text替换Offset起Offset+count终的字符

    spiltText(offset);//在offset位置将文本分为两个文本节点

    substringData(offset,count);//提取从offset到offset+count位置的字符串

    每个包含文本的元素只能包含一个文本节点,并且文本节点必须有内容。空格也可以

    1、创建文本节点

    document.createTextNode();参数为插入节点中的文本。

    在创建新的文本节点时,除非将文本节点插入到文档树已存在的节点中,否则不会在浏览器窗口看见新节点。

    <script type="text/javascript">
          var div=document.createElement("div");
          div.className="message";
          var text=document.createTextNode("new node");
          div.appendChild(text);
          alert(document.body.appendChild(div));
    
        </script>

    这段代码必须放在body中,不然document.body会为null。同时new node会出现在页面中

    2、规范化文本节点

    合并相邻文本节点的normalize()方法。在一个包含两个或多个文本节点的父元素上调用normalize()方法,会将所有同胞文本节点合并为1个文本节点,节点的nodeValue值为合并之后的值。

    <script type="text/javascript">
          var div=document.createElement("div");
          div.className="message";
          var text=document.createTextNode("new node");
          var text1=document.createTextNode("new node1");
          div.appendChild(text);
          div.appendChild(text1);
          alert(div.childNodes.length);//2
          div.normalize();
          alert(div.childNodes.length);//1
          document.body.appendChild(div);
    
        </script>

    二、Comment类型

    注释在DOM中是Comment类型表示的。

    nodeName=#comment

    parentNode为Document或Element

    和Text类型的操作方式相同

    三、CDATASection类型

    针对XML文档表示CDATA区域继承自Text用于除spiltText之外所有方法

    nodeName=#cdata-section

    在XML文档中可以使用document.createCDATASection(),方法创建

    四、DocumentType类型(不常用)

    五、Attr类型

    元素的特性在DOM中是以Attr类型来表示的。在所有浏览器中都可以访问Attr类型的构造函数和属性。

    parentNode=null;

    3个属性:name=nodeName,value=nodeValue,specified

  • 相关阅读:
    HTML表单
    CSS等高布局的6种方式
    HTML用户反馈表单
    HTML美化修饰<A>
    sql查询语句 --------一个表中的字段对应另外一个表中的两个字段的查询语句
    jq 表格添加删除行
    js 静止f1到f12 和屏蔽鼠标右键
    手机自适应页面的meta标签
    tp3.2 的验证码的使用
    php多线程抓取网页
  • 原文地址:https://www.cnblogs.com/Black-Cobra/p/7462402.html
Copyright © 2011-2022 走看看