• DOM(三)


    • Text类型

    文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容,纯文本中可以包含转义后的HTML字符,但不包含HTML代码,Text节点具有以下特征:

    1. nodeType值为3;
    2. nodeName的值为”#text”;
    3. nodeValue的值为节点所包含的文本;
    4. parentNode是一个Element;
    5. 不支持子节点

    可以通过nodeValue属性或data属性访问Text节点包含的文本,这两个属性中包含的值相同,对nodeValue的修改也会通过data反映出来,反之亦然,使用下面方法可以操作节点中的文本。

    1. appnedData(text):将text添加到节点的末尾。
    2. deleteData(offset,count):从offset指定的位置开始删除count个字符。
    3. insertData(offset,text):在offset指定的位置插入text。
    4. replaceData(offset,count,text):用text替换从offset指定的位置开始到offset+count为止的文本。
    5. splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点。
    6. substringData(offset,count):提取从offset指定的位置开始到offset+count为止处的字符串。

    处理这些方法之外,文本节点还有一个length属性,保存着节点中字符的数目,而且nodeValue.length和data.length中也保存着相同的值。

    如果这个文本节点当前存在于文档树中,那么修改文本节点的结果就会立即得到反映,另外,在修改文本节点时还要注意,此时的字符串会经过HTML编码,换句话说,小于号,大于号或引号都会像下面例子一样被转义。

    • 创建文本节点

    可以使用document.createTextNode()创建新文本节点,这个方法接受一个参数:要插入节点中文本。在创建新文本节点的同时,也为其设置ownerDocument属性,不过,除非把新节点添加到文档树中已经存在的节点中,否则我们不会再浏览器窗口中看到新节点,下面创建div元素并向其中添加一条信息的代码:

    var element=document.createElement(“div”);
    
    element.className=”message”;
    
     
    
    var textNode=document.createTextNode(“Hello world!”);
    
    element.appendChild(textNode);
    
     
    
    document.body.appendChild(element);

    一般情况下,每个元素只有一个文本子节点,不过,在某些情况下也可以包含多个文本子节点如:

    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);
    
     
    
    document.body.appendChild(element);
    • 规范化文本节点

    DOM文档存在相邻的同胞文本节点很容易导致混乱,因为分不清哪个文本节点表示哪个字符串,另外,DOM文档中出现相邻文本节点的情况也不在少数,于是就催生了一个能够将相邻文本节点合并的方法,这个方法是有Node类型定义的(因而在所有节点类型中都存在),名叫normalize()。如果在一个包含两个或多个文件节点的父元素上调用normalize方法,则会将所有文本节点合并成一个节点,结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值,例如:

    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);
    
     
    
    document.body.appendChild(element);
    
    alert(element.chlidNodes.length);//2
    
     
    
    element.normalize();
    
    alert(element.childNodes.length);//1
    
    alert(element.firstChild.nodeValue);//”Hello world!Yippee!”

    浏览器在解析文档时永远不会创建相邻的文本节点,这种情况只会作为执行DOM操作结果出现。

    • 分割文本节点

    Text类型提供了一个作用与normalize相反的方法:splitText()。这个方法会将一个文本节点分成两个文本节点,即按照指定的位置分割nodeValue值,原来的文本节点将包含从开始到指定位置之前的内容,新文本节点将包含剩下的文本,这个方法会返回一个新文本节点,该节点与原节点的parentNode相同。

    var element=document.createElement(“div”);
    
    element.className=”message”;
    
     
    
    var textNode=document.createTextNode(“Hello world!”);
    
    element.appendChild(textNode);
    
     
    
    document.body.appendChild(element);
    
     
    
    var newNode=element.firstChild.splitText(5);
    
    alert(element.firstChild.nodeValue);//”Hello”
    
    alert(newNode.nodeValue);//”world!”
    
    alert(element.childNodes.length);//2
    •  Comment类型

    注释在DOM中是通过Comment类型来表示的,Comment节点具有下列特征:

    1. nodeType的值8;
    2. nodeName的值为”#comment”;
    3. nodeValue的值是注释的内容;
    4. parentNode可能是Document或Element;
    5. 不支持子节点。

    Comment类型与Text类型继承相同的基类,因此它拥有除了splitText之外的所有字符串操作方法。与Text类型相似,也可以通过nodeValue或data属性来取得注释内容。

    使用document.createComent()并未其传递注释文本也可以创建注释节点。

    • CDATASection类型

    CDATASection类型只针对基于XML的文档,表示的是CDATA区域。与Comment类似,CDATASection类型继承自Text类型,因此拥有除splitText之外的所有字符串操作方法,CDATASection节点具有下列特征:

    1. nodeType的值为4;
    2. nodeName的值为”#cdata-section”;
    3. nodeValue的值是CDATA区域中的内容;
    4. parentNode可能是Document或Element;
    5. 不支持子节点。

    CDATA区域只会出现在XML文档中,因此多数浏览器都会把CDATA区域错误地解析为Coment或Element。

    •  DocumentType类型

    DocumentType类型在Web浏览器中并不常用,仅有firefox、safari和Opera支持它。DocumentType包含着与文档的doctype有关的所有信息:

    1. NodeType的值为10;
    2. nodeName的值为doctype的名称;
    3. nodeValue的值为null;
    4. parentNode是Document;
    5. 不支持子节点。
    •  DocumentFragment类型

    在所有节点类型中,只有DocumentFragment在文档中没有对应的标记,DOM规定文档片段是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。DocumentFragment节点特点如下:

    1. nodeType的值为11;
    2. nodeName的值为 “#document-fragment”;
    3. nodeValue的值为null;
    4. parentNode的值为null;
    5. 子节点可以是Element、processingInstruction、comment、text、CDATASection或EntityReference。

    虽然不能把文档片段直接添加到文档中,但可以将它作为一个仓库来使用,即可以在里面保存将来可能会添加到文档中的节点,要创建文档片段,可以使用document.createDocumentFragment()方法。

    •  Attr类型

    元素的特性在DOM中以Attr类型来表示。在所有浏览器中都可以访问Attr类型的构造函数和原型,特性节点具有以下特征:

    1. nodeType的值为11;
    2. nodeName的值是特性的名称;
    3. nodeValue的值是特性的值;
    4. parentNode的值为null;
    5. 在HTML中不支持子节点;
    6. 在XML中子节点可以是Text或EntityReference。

    尽管它们也是节点,但特性却不被认为是DOM文档树的一部分,开发人员最常用的是getAttribute、setAttribute和removeAttributes方法,很少直接引用特性节点。

    Attr对象有3个属性:name、value和specified,其中name是特性名称,value是特性值,specified是一个布尔值,用以区别特性时在代码中指定的还是默认的。

    使用document.createAttribute()并传入特性的名称可以创建新的特性节点,代码如下:

    var attr=document.createAttribute(“align”);
    
    attr.value=”left”;
    
    element.setAttributeNode(attr);
    
    alert(element.attributes[“align”].value);//”left”
    
    alert(element.getAttributeNode(“align”).value);//”left”
    
    alert(element.getAttribute(“align”));//”left”
    •  动态脚本

    动态加载外部脚本,如下代码:

    var script=document.createElement(“script”);
    
    script.type=”text/javascript”;
    
    script.src=”client.js”;
    
    document.body.appendChild(script);
    • 动态样式

    动态加载外部样式,如下代码:

    var link=document.createElement(“link”);
    
    link.rel=”stylesheet”;
    
    link.type=”text/css”;
    
    link.href=”style.css”;
    
    var head=document.getElementsByTagName(“head”)[0];
    
    head.appendChild(link);
  • 相关阅读:
    冒泡排序
    三种for循环遍历
    打印一年中的月历
    基于主主复制的mysql双机热备+keepalived实现高可用性
    docker实现apache+php容器和mysql容器独立运行
    XML和JSON
    PHP表单
    【翻译-Docker】Post-installation steps for Linux
    【翻译】docker install
    小计划
  • 原文地址:https://www.cnblogs.com/hetaojs/p/6951185.html
Copyright © 2020-2023  润新知