JavaEE笔记——JavaScript中对dom的操作

Posted 2020-09-13 OverZeal

节点及其类型

在javascript中，节点分为三种：

1. 元素节点:html标签元素.
2. 属性节点: 元素的属性, 可以直接通过属性的方式来操作.
3.  文本节点: 是元素节点的子节点, 其内容为文本.

在什么位置写DOM代码?

一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,　该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点

 

window.onload = function(){
     var cityNode = document.getElementById("city");
     alert(cityNode);
};

 

 

节点的属性（所有类型的节点都有的属性）

1. nodeName: 代表当前节点的名字，只读属性，如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
2. nodeType：返回一个整数, 只读属性， 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点，这个数值代表着给定节点的类型
3. nodeValue：返回给定节点的当前值(字符串)， 可读写的属性，在这里三种元素分别返回：

• 元素节点, 返回值是 null
• 属性节点: 返回值是这个属性的值
• 文本节点: 返回值是这个文本节点的内容

获取元素节点

1. document.getElementById: 根据 id 属性获取对应的单个节点，如果不存在该id的节点，将返回null。该方法只能用于document对象
2. document.getElementsByTagName:根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度（不必非得用在整个文档上，它也可以用在某个特定元素的子节点当中寻找有着给定标签名的元素）

      var container = document.getElementById(“content”);
      var paras = container.getElementsByTagName(“p”);
      alert(paras.length);

3. document.getElementsByName:根据节点的 name 属性获取符合条件的节点数组
4. 其它的两个方法,　ie 根本就不支持, 所以不建议使用

 

获取元素节点的子节点(只有元素节点才有子节点)

1. childNodes 属性获取全部的子节点, 结果是个数组， 因为如果要获取指定的节点的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取。文本节点和属性节点都不可能再包含任何子节点，所以它们的 childNodes 属性永远会返回一个空数组
2. firstChild 属性获取第一个子节点，文本节点和属性节点都不可能包含任何子节点，所以它们的 firstChild 属性永远会返回 null
3. lastChild 属性获取最后一个子节点，同上

其他常用属性和方法

nextSibling: 返回一个同级节点的下一个子节点

previousSibling：返回一个同级节点的上一个子节点

parentNode：返回一个给定节点的父节点。 parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点， document 节点的没有父节点

hasChildNodes()：该方法用来检查一个元素是否有子节点，返回值是 true 或 false

var booleanValue = element.hasChildNodes();

文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false

如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串

 

获取属性节点

1. 可以直接通过 元素节点.属性 这样的方式来获取和设置属性节点的值（较常用）
2. 通过元素节点的 getAttributeNode 方法来获取属性节点,然后在通过 nodeValue 来读写属性值，给定属性的值将以字符串的形式返回，如果给定属性不存在，getAttribute() 将返回一个空字符串 , 对于自定义的属性，此方法较为兼容 

获取文本节点

步骤: 元素节点 --> 获取元素节点的子节点， 若元素节点只有文本节点一个子节点,例如

<li id="bj" name="BeiJing">北京</li>

可以先获取到指定的元素节点 eleNode,然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值

忽略空白文本节点 

 

var box= document.getElementById(\'div1\');
alert(box.childNodes.length);    //会把中间的空白文本节点获取到

 

标准的 DOM 具有识别空白文本节点的功能，所以在火狐浏览器是 7 个，而 IE 自动忽略了，如果要保持一致的子元素节点，需要手工忽略掉它

function removeWhiteNode(node){
    for(var i=0;i<node.childNodes.length;i++){
        if(node.childNodes[i].nodeType==\'3\'&&/^\\s+$/.test(node.childNodes[i].nodeValue)){
            node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
        }
    }
    return node;
}

以后获得div1中的firstChild，lastChild进行删除，复制等操作时，就可以使用：

var child=removeWhiteNode(box).lastChild;

 

创建节点

创建一个元素节点:

createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串，方法的返回值是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1
注意：新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象(还在内存中),需要使用appendChild进行添加

 

    var box=document.getElementById(\'div1\');           
    var p=document.createElement(\'p\');                //创建一个节点，还未添加
    box.appendChild(p);                                //将新节点添加到id=div1的子节点树里

 

创建一个文本节点:

createTextNode(): 创建一个包含着给定文本的新文本节点， 这个方法的返回值是一个指向新建文本节点引用指针， 它是一个文本节点，所以它的 nodeType 属性等于 3
方法只有一个参数：新建文本节点所包含的文本字符串

注意：同上，新元素节点不会自动添加到文档里

 

    var box=document.getElementById(\'div1\');           
    var p=document.createElement(\'p\');                //创建一个节点，还未添加
    box.appendChild(p);                                //将新节点添加到id=div1的子节点树里
    var text=document.createTextNode(\'测试啦\');
    p.appendChild(text);

 

 

 

为元素节点添加子节点:

appendChild(): 例如 var reference = element.appendChild(newChild); 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点，方法的返回值是一个指向新增子节点的引用指针

 

删除节点

removeChild(): 从一个给定元素里删除一个子节点

var reference = element.removeChild(node);

返回值是一个指向已被删除的子节点的引用指针， 某个节点removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除。如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode(获得父结点) 属性可以帮忙

节点的替换

replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点 

 

var reference = element.replaceChild(newChild,oldChild); 

 

返回值是一个指向已被替换（oldChild）的那个子节点的引用指针

注意：该节点除了替换功能以外还有移动的功能， 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:

/**
     * 互换 aNode 和 bNode
     * @param {Object} aNode
     * @param {Object} bNode
     */
    function replaceEach(aNode, bNode){
        
        if(aNode == bNode){
            return;
        }
        
        var aParentNode = aNode.parentNode;
        //若 aNode 有父节点
        if(aParentNode){
            var bParentNode = bNode.parentNode;
            
            //若 bNode 有父节点    
            if(bParentNode){
                var tempNode = aNode.cloneNode(true);
                bParentNode.replaceChild(tempNode, bNode);
                aParentNode.replaceChild(bNode, aNode);    
            }
        }

    }   

 

插入节点

insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面

var reference = element.insertBefore(newNode,targetNode);

节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面，节点 targetNode 必须是 element 元素的一个子节点

也就是说element是父节点，targetNode是子节点，如果element使用的是子节点，就要先找到其父节点

注意：并没有插入到给定元素节点的给定子节点的后面的方法，需要自定义函数：

 

/**
     * 将 newChild 插入到 refChild 的后边
     */
    function insertAfter(newChild, refChild){
        var refParentNode = refChild.parentNode;
        
        //判断 refChild 是否存在父节点
        if(refParentNode){
            //判断 refChild 节点是否为其父节点的最后一个子节点
            if(refChild == refParentNode.lastChild){
                refParentNode.appendChild(newChild);
            }else{
                refParentNode.insertBefore(newChild, refChild.nextSibling);
            }    
        }
    }

 

复制节点

cloneNode()方法可以把子节点复制出来

var box = document.getElementById(\'box\');
var clone = box.firstChild.cloneNode(true); //获取第一个子节点，true 表示复制内容
box.appendChild(clone); //添加到子节点列表末尾

 

innerHTML属性

浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。 innerHTML 属性可以用来读/写某给定元素节点（注意只有元素节点可以使用）里的内容(如果该内容有HTML标签也会原样输出)

代码1：显示给定元素HTML内容

代码2：替换给定元素的HTML内容

代码3：互换元素的HTML内容