• coreDOM 处理dom树


    处理HTML文档的第一步就是获得文档元素的引用,每一个元素在dom中就是一个节点,所有的元素在dom中就构成了一个dom树。可以通过某一个节点找到其他说有的节点。

    1.一切皆是节点

    就是html中的所有的内容都被描述为节点,只是用不同的类型进行描述的的。

    eg: <p  font="13px #CCC">我是本文节点</p>

    p是元素节点

    font 是属性节点,有属性和值

    我是文本节点:是文本节点

    2.Node 接口定义的方法

    HTML文档中解析为dom后,所有的内容变为节点,不同的节点用不同的类型,每个类型的节点对应一个接口,有element  atrr  text document 等。

    element 和document 都是继承与Node接口。

    Node 接口对应的方法:

    appendChild()    在元素中的最后一个子元素后面追加元素。

    cloneNode()    克隆一个节点

    hasAttributes()   判断元素是否有属性

    insertBefore()     在元素之前插入一个兄弟节点

    removeChild()    从子节点列表中删除一个子节点。

    replaceChild()   替换一个子节点。

    属性:

    nodeName: 节点名称

    nodeValue: 返回节点值

    nodeType: 返回节点类型

    parentNode: 返回父节点

    childNode: 返回所有子节点   firstNode:第一个子节点   lastChild: 最后一个子节点,  previousSibling:前一个节点, nextSibling:后一个节点

    attributes:返回该节点的所有属性

    ownerDocument: 返回该节点对应的document 对象。

    eg:获得一个根元素,通过这个根元素遍历所有的节点。 可以遍历属性节点  文本节点,删除节点,添加,克隆,替换。

    var root=document.documentElement;

    var nodeList=root.childNode;//方法一

    for(var i=0;i<nodeList.length;i++){

         if(nodeList[i].nodeType==1)

         document.write(nodeList[i].nodeName+"="+)

         if(nodeList[i].nodeType==3)

         document.write(nodeList[i].nodeName+"="+nodeList[i].nodeValue);

    }

    var childe=root.firtstChild;

    while(child!=null)

    {

    //输出

    childe=root.nextSibling;

    }

    2.2.  对html元素中的节点 属性 和内容删除

     删除节点

    removeChild(childenode)   //删除节点的子树

    eg: root.removeChild(root.firstChild);

    删除节点属性

    Element.removeAttribute(sName);

    eg: root.removeAttribute("id");  //移除当前属性

    root.getAttribute("id"); //获得当前属性

    删除节点的属性节点

    Element.removeAttributeNode(arr_id)  //arr_id 是属性节点

    删除节点中的文本内容(文本作为文本节点 可以先获得文本节点)

    Element.removeChild(textNode);

    2.3. 使用replaceChild方法替换节点

    replaceNode=parentNode.replaceChild(sNewNode,sChildNode),是用newNode 代替sChildNode 并且返回替换节点的引用。

    3.下面接口都是在node的基础上继承下来的, document,Attr , Element ,  text接口他们除了 Node接口外还有其他的方法和属性

    3.1 document接口(代表整个HTML 文档)

       创建节点

       ele.createElement("div");// 创建元素节点

       ele.createText(textName); //创建文本节点

       ele.createAttribute(sName); // 创建属性节点

    3.2 Attr 接口

     可以通过属性对象获取属性的名称 和值  attr.name  attr.value;

    可以先通过Node 中的getAttributeNode() 方法获得这个元素中的属性节点,然后用这个属性节点通过 Attr 接口属性 name ,value 获得对应的属性名称和属性值。

    attr=ele.getAttributeNode();

    var a=attr.name;

    var b=attr.value;

    3.3 Element接口

    element对象可以使用 document.getElementById(), document.getElementsByTagName()方法获取该元素的节点以进一步处理。主要用来处理元素的属性。

    eg: var div=root.getElementById("one");

       var cl=div.getAttribute("class") // 通过element 对象获取元素的属性

       1. 将元素节点插入到文档中

    // 1.可以用 appendChild() 插入

    var obj=document.creatElement("p");

    div.appendChild(obj);

    obj.parentChild.appendChild(obj);

    // 2.可以用beforeInsert()插入  //这个是InsertBefore()

    var iobj=obj.cloneNode(false);

    div.InsertBefore(obj,div.firstChild);  // 是将第一参数插入到第二个参数之前

       2. 元素添加属性

    使用setAttribute("class","font='13px'");// 添加元素属性

    使用 var t=ele.createAttribute("id");  // 创建元素节点

    使用 ele.setAttributeNode(t);

    HTML5Document相关属性和方法  是继承至document core对象

    document. getElementByTagName()方法

    是返回一个节点列表,他包含了与指定节点名匹配的所有后代(不仅包括子后代)。

    document.getElementByTagName(" *")====root.childNodes; 是节点名称  比如 p  span tr td a。。。

    document.getElementsByName()  是根据name属性获得元素, name 的属性包括button input select textarea form object map output fieldset meta param 等。

    document.getElementById("id号");

    //通过id 号获得该唯一的元素

    document.getElementByClassName(“main”)// 是通过元素的class 属性获得元素对象。

    innerHTML  和 outerHTML 是所有的元素都可以有的方法

    ele.innerHTML="string"+a;  //其中字符串要用“” a 是变量 可以用+ 链接

    ele.outHTML, 是返回ele的整个元素内容,包含元素标签本身。

    document.write()

    document.writeln()// 里面放字符串,可以是HTML     ,是document的方法

    css选择反问元素

    Element querySelector(selectors)  //返回第一个元素

    NodeList querySelectorAll(selectors)  // 返回所有符合 的元素集合

    selectors: body p   //p 是body 的泛子节点

                   body>p  // p是body 的直接子节点

      HTML5表单处理

  • 相关阅读:
    <摘录>如何在64位linux强制编译32位应用程序
    Ubuntu安装Java
    Mybatis学习
    Java小工具Lombok
    jenkins忘记admin密码的处理方法
    list删除元素
    ConcurrentHashMap详解
    用户登录
    SpringDemo01
    SpringBoot Eclipse 热部署
  • 原文地址:https://www.cnblogs.com/xuruweb/p/4222450.html
Copyright © 2020-2023  润新知