码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript文档对象模型DOM

时间:2019-08-29 00:04:08      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:替换   节点   append   兄弟节点   rtb   before   关系   create   文档   

 

节点关系属性:(带element的属性ie低版本不支持)

  • childNodes—所有子节点(元素,注释,文本);
  • nodeType——属性代表节点类型;
  • children——获取元素子节点
  • firstChild——第一个子节点(元素,注释,文本)
  • *firstElementChild ——第一个元素子节点
  • lastChild ——最后一个子节点 (元素,注释,文本)
  •  *lastElementChild ——最后一个元素子节点
  • parentNode——父元素
  • offsetParent ——定位父级
  • previousSibling ——上一个兄弟节点
  •  *previousElementSibling ——上一个元素兄弟节点
  • nextSibling ——下一个兄弟节点
  •  *nextElementSibling ——下一个元素兄弟节点

节点操作(增删改):

  • 创建节点——document.createElement(‘div‘)
            > document.createElement(div) 创建元素节点
    
            > document.createTextNode(文本) 创建文本节点
    
            ```
                var newLi = document.createElement(li);
                newLi.innerHTML = 444;
            ```

     

  • 在元素的末尾添加项——parent.appendChild(child)
            ```
                var ul = document.getElementsByTagName(ul)[0];
                ul.appendChild(newLi);
            ```

     

  • 在指定元素之前插入节点——oldNode.parentNode.insertBefore(newNode,oldNode);
            ```
                var li2 = document.getElementById(li2);
                var newLi1 = document.createElement(li);
                newLi1.innerHTML = 1-21-2;
                li2.parentNode.insertBefore(newLi1,li2);
    
            ```

     

  • 替换元素——replaceChild(newNode,oldNode)
            * 如果newNode是已经存在的标签,就是改变标签的物理位置
            ```
                var newLi2 = document.createElement(‘li‘);
                newLi2.innerHTML = ‘三三三‘;
                var li3 = document.getElementById(‘li3‘);
            
                //ul.replaceChild(newLi2,li3);
                li3.parentNode.replaceChild(newLi2,li3);
            ```

     

  • 删除节点——removeChild(delNode)
            ```
                var li5 = document.getElementById(‘li5‘);
                //ul.removeChild(li5);
                li5.parentNode.removeChild(li5);
                // li5.remove(); ie不支持
            ```

     

  • 复制节点——cloneNode()
            > cloneNode()  克隆节点,不传参,只复制标签本身,不包括内容
            
            > cloneNode(true)  深度克隆,复制标签及标签里面的所有内容

     

获取元素的方法:

    - document.getElementById()
    - document.getElementsByTagName()  //[]
    - document.getElementsByClassName() //[] ie低版本不支持
        ```
        //封装兼容所有浏览器的通过类名获取元素的方法
            function getByClass(ele,cls){
                //先获取ele中所有标签(不区分标签名)
                var elements = ele.getElementsByTagName(‘*‘);  
                var ary = []; 
                //遍历elements
                for(var i = 0; i < elements.length; i++){
                    //  eles[i].className   ‘red aa ccc‘
                    //先把类名词列表分割成数组 
                    var clsAry = elements[i].className.split(‘ ‘);  //[‘red‘,‘aa‘,‘ccc‘] 
                        //遍历类名数组,如果存在cls相同的类名,就把这个元素放进ary
                        for(var j = 0; j < clsAry.length ; j++){
                            if(cls == clsAry[j]){
                                ary.push(elements[i]);  
                                break;  
                            }
                        }
                }
                return ary;   
            }
        ```

 

    - document.querySelector(‘#box .red‘); //获取一个元素 不兼容ie低版本
    - document.querySelectorAll(‘#box .red‘);//获取一组元素  不兼容ie低版本

 

JavaScript文档对象模型DOM

标签:替换   节点   append   兄弟节点   rtb   before   关系   create   文档   

原文地址:https://www.cnblogs.com/musong-out/p/11427284.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!