DOM

Posted develop-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM相关的知识,希望对你有一定的参考价值。

DOM:Document Object Model    文档对象模型【当前html
     BOM操作不够实现页面的动态交互效果,操作html才是核心。
     DOM提供了用程序动态控制html接口,描绘了一个层次化的节点树。
     便于开发人员添加,移除,修改页面。DOM处于javascript的核心地位上
 
DOM等级分三类
     1.定义CORE核心文档规范
     2.定义XML文档规范
     3.定义HTML文档规范
 
一、document属性:ws不自动提示这些单词【方法加执行符,属性直接点.】
     body:返回body元素
     URL:返回当前文档完整的url地址
     lastModified:返回文档最后一次修改的日期和时间
     charset:返回编码字符
     images:返回页面中所有的image的引用
     scripts:返回页面中所有脚本的集合
     title:返回当前文档的标题啊,同时也可以修改标题
     
五个节点:HTML结构中每一个元素都是节点
     加载html页面时,web浏览器生成一个树形结构,用来表示页面内部结构。     
     html是树形结构,DOM将这种树形结构理解为由节点组成,就是节点树。
          文档本身是文档节点
          所有html元素,标签是元素节点
          所有html属性是属性节点
          html元素内的文本是文本节点
          注释是注释节点
 
二、document方法-获取节点\元素:
             (1)getElementById("id属性值")   by:按照
                 按照id属性值获取元素对象,返回单个对象
                 注意:若有相同的id属性值,以第一个为准
             (2)getElementsByName("name属性值");
                 按照name属性值获取元素对象,返回对象数组
             (3)getElementsByTagName("标签名/元素名称");
                 按照标签名获取元素对象,返回对象数组
             (4)getElementsByClassName("class属性值");
                 按照class的属性值获取元素对象,返回对象数组
 
             javascript:void(0);伪协议,表示不执行跳转而去执行指定的事件处理函数
 
     <input type="checkbox" name="hobby" value="游泳" />游泳
     按照name获取元素
     var ho= document.getElementsByName("hobby");
     for(var i=0; i<=ho.length-1; i++) {
                console.log(ho[i].value);
            }
 
     注意:
     在进行dom操作时,需要等html全部加载完毕后再进行操作,两种方式
                    (1)可以将script标签放在html代码下面
                        可以放在body的最后或body下
                    (2)可以利用onload事件
                        1)可以给body标签添加onload事件函数:<body onload="init();">
                        function init(){
                             var btn=document.getElementById("btn");
                             btn.onclick=function(){
                             alert("你好");
                        2)写在style下面在js中编写:
                            window.onload = function () {
                                //js代码
                                 window.onscroll=function(){}
                            }
 
三、document方法2-创建元素,貌似只能在控制台查看。。。
     createElement:创建标签,可以指定任何标签
     createTextNode:创建文本节点
     createAttribute:创建属性节点
     createComment:创建一个注释
 
创建图片对象
      var img=new Image() ,通过new 的方式创建一个图片对象
      img.src=‘‘; 指定src路径  
      document.body.appendChild(img); 把图片放入页面中 appendChild 
 

 
 
一、操作属性/操作元素属性的方法:
     attributes: 返回一个元素的属性数组/对象
     setAttribute():设置或者改变指定属性并指定值
         (改变或增加属性) 第一个参数:属性; 第二个参数:属性名称
          d.setAttribute(‘id‘,‘test1‘);//改变id为test1
     hasAttribute(): 如果元素中存在指定的属性,返回true,否则false ; 一个参数
     hasAttributes(): 如果元素有任何属性返回true,否则返回false ;  无需传参
 
二、操作样式  
     d.classList: 返回class的类名,以数组形式
          ["cont", "bg", "btn", value: "cont bg btn"]
     d.className: 返回类名的数组形式!因为class是保留字,不能直接使用
     d.style: 返回行间定义的样式
          style只能获取在行间设置的样式,不能获取外部引用的样式
     如何获取行间样式的值?对象.属性 可以取值,也可以赋值,还可以增加属性
          d.style.font-size 会报错 ——>d.style[‘font-size‘] | fontSize
          d.style.textAlign = ‘center‘;
     
     获取元素实际的css样式值
    function getStyle(ele) {
        var style = null;
        if (window.getComputedStyle) {//在谷歌/火狐等现代浏览器使用
            style = window.getComputedStyle(ele, null);
        } else {//IE用这个属性
            style = ele.currentStyle;
        }
        return style;
    }
    console.log(getStyle(d).fontSize);//24px
           

 
 
一、节点\标签:基本属性
     nodeType 节点类型;返回节点类型的常数,1-12种类型的常数值
     nodeValue 节点的值
     nodeName 节点的名字
     
     Node类型    Named Constant    说明<br>
    * 1    ELEMENT_NODE    元素节点<br>
    * 2    ATTRIBUTE_NODE    属性节点<br>
    * 3    TEXT_NODE    文本节点<br>  
    * 9    DOCUMENT_NODE    文档节点<br>
   
     <div id=‘test‘>div</div>
     d.attributes   获取所有属性
     d.attributes.id.nodeValue   //test
     d.attributes.id.nodeType   //2
 
二、获取节点  的属性
      ownerDocument: 返回顶层文档,#document  owner:所有者
      parentNode: 返回父节点
      childNodes: 返回子节点,包含文本节点,空格也是一个文本节点 
      firstChild: 第一个子节点 //#text 空格
      lastChild: 最后一个子节点
      firstElementChild: 第一个子元素
      lastElementChild: 最后一个子元素
      previousSibling: 前面的一个同级节点  previous:前一个 sibling:兄弟
      nextSibling: 后面的一个同级节点
      previousElementSibling: 前面的一个同级元素,没有返回null
      nextElementSibling: 后面的一个同级元素,没有返回null
 
三、操作节点  节点的方法
     cloneNode():复制节点
          浅复制:不传参数或者传入false,只会复制元素本身
          深复制:传入参数true,把元素本身及其子元素都复制出来
     appendChild():添加子元素,子元素成为了父元素的最后一个子节点【对象】
          var div=document.createElement(‘div‘)
          d.appendChild(div)
 
     insertBefore(): 把元素插入到指定元素之前,(新节点,指定位置)
         创建一个节点
         var span = document.createElement(‘span‘);
         var a = document.getElementById(‘a‘);
         d.insertBefore(span,a);//第一个参数新元素,第二个参数是位置
 
     removeChild( 需要被移除的元素 ): 返回值是被移动的节点
     replaceChild( 新节点,需要被替换的元素 ) :返回值是被替换的元素
 
四、检测节点:
     hasChildNodes():检测元素是否有子节点,如果有子节点返回true,无false
          注意:文本注释都可以被检测到
     contains(): 检测某个节点是否是另外一个节点的子节点(子孙元素也可以检测)contains:包含
          用法:父元素.contains(子元素);返回值为true和false
          注意:检测自身返回的也是true
     isEqualNode(): 检测2个节点是否一样(必须是一模一样)
          用法: 元素1.isEqualNode(元素2),返回值为true和false
          var span01 = spans[0];
 

一、文本操作
     innerText: 返回内部文本,不返回内部的标签结构,不解析标签!!!
     innerHTML: 返回内部的HTML结构!(使用频率非常高!!!)【字符串】
使用:1.控制台打印:innerText只有文本内容   innerHTML返回内部结构
      2.向页面中增加标签,会覆盖原有的文本【页面时间刷新】
        p.innerHTML = ‘<h3>梅雨季节大上海!!!</h3>‘+‘<h1>SHSXT!!</h1>‘;
 
了解:元素大小和偏移量: ——>属性   【贪吃蛇】
     offsetHeight:返回元素的高度包括边框和填充
     offsetWidth:返回元素的宽度包括边框和填充
     offsetLeft:返回当前元素的相对水平偏移位置
     offsetTop:返回当前元素的相对垂直偏移位置
     offsetParent:返回元素的偏移容器
 
length属性,可以使用length进行遍历
    var items = document.getElementsByClassName(‘item‘);
    console.log(items.length);//
    for (var i = 0; i < items.length; i++) {
        var obj = items[i];
        console.log(obj);
    }
 
链式操作:就是 :方法.方法.方法.方法.方法.方法...
    在js中,只有返回节点集合的情况下才可以使用链式调用。(这里只是说在DOM操作范围)
    var cont = document.getElementById(‘cont‘);
    var divs = document.getElementById(‘cont‘)
            .getElementsByTagName(‘div‘)[0]
            .getElementsByTagName(‘span‘);
    console.log(divs); //span
 
window 指窗体。document指页面。document是window的一个子对象。


 
操作节点:
     cloneNode():复制节点
          浅复制:不传参数或者传入false时,只会复制元素本身
          深复制:传入参数true,把元素本身及其子元素都复制出来
               只是复制下来,原DOM结构不会发生改变
     appendChild():增加子元素
          子元素成为父元素的最后一个子节点
          
 
新增元素节点
                 1.write()
                     将任意的字符串插入到文档中
                 2.createElement();
                     创建一个元素节点
                     参数:传入标签名称
                     返回值:返回创建的元素对象
                 3.createTextNode()
                     创建一个文本节点
                 4.appendChild()
                     向元素中添加新的子节点,作为最后一个子节点
                 5.insertBefore()
                     向指定的已有的节点之前插入新的节点
 
             setAttribute()
                 第一个参数:要设置的属性
                 第二个参数:属性值
             步骤:
                 1.获取元素要添加的位置
                 2.创建要添加的元素
                 3.若要设置元素的属性,通过元素对象操作属性即可
                     元素对象.属性名/元素对象.setAttribute("属性名","属性值")
                 4.将新元素添加到要添加的位置上
 
            创建option标签的方式
                1.通过createElement()方法创建
                2.new Option(text值,value值);
 
          //添加p元素
        function addP() {
            //获取p元素要插入的位置
            var container = document.getElementById("container");
 
            /*第一种方式*/
            1.创建一个p元素
            var p = document.createElement("p");
            2.创建一个文本节点
            var txt = document.createTextNode("这是一个新增的p标签");
            3.将文本节点追加到p元素中
            p.appendChild(txt);
            4.将p元素追加到div中
            container.appendChild(p);
            */
 
            /*第二种方式*/
            /*
            1.创建一个p元素
            var p = document.createElement("p");
            2.向p元素添加文本
            p.innerHTML = "这是一个新增的p标签";
            3.将p元素追加到div中
            container.appendChild(p);
            */
 
            /*第三种方式*/
            //innerHTML在赋值时新的内容覆盖原有内容,若要保留原有内容,拼接上原有内容
            container.innerHTML += "<p>这是一个新增的p标签</p>";
        }
 
插入文本节点
     insertBefore(newItem,exsitingItem)
                     向指定的已有的节点之前插入新的节点
                     newItem:要插入的节点
                     exsitingItem:参考节点
                     格式:
                         exsitingItem.parentNode.insertBefore(newItem,exsitingItem)
                         首先通过参考节点获取父节点,然后根据参考节点向父节点中插入新元素
                         exsitingItem.parentNode.insertBefore(newItem,null)
                             相当于
                         exsitingItem.parentNode.appendChild()
 
             parentNode:可以获取某个元素的父节点
             nextSibling:获取当前元素的下一个同胞
 
     function insert () {
            //1.获取参考节点
            var span = document.getElementById("span1");
            //2.创建一个新节点
            var p = document.createElement("p");
            p.innerHTML = "新节点";
            //3.向参考元素的父节点中插入内容,插入的位置是在参考节点之前
            //span.parentNode.insertBefore(p,span);   
            //span.parentNode.insertBefore(p,null);   
            span.parentNode.insertBefore(p,span.nextSibling);
        }
 
修改元素节点
             replaceChild(newNode,oldNode)
                 用新的节点替换旧的节点
                 newNode:新的节点
                 oldNode:要被替换掉的节点
                 格式:
                     oldNode.parentNode.replaceChild(newNode,oldNode)
                     首先通过旧节点定位到父节点,然后用新的节点替换旧节点
             cloneNode()
                 复制节点
                 var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
                     true:深度克隆,可以克隆结构和内容
                     false(默认值):只克隆结构
 
        function replaceNode () {
            //1.获取旧的节点
            var span = document.getElementById("span1");
            //2.创建一个新的节点
            var div = document.createElement(‘div‘);
            div.innerHTML = "这是新的节点";
            //3.用新节点替换旧节点
            span.parentNode.replaceChild(div,span);
        }
 
        //复制节点
        function copy () {
            //1.获取要复制的元素
            var ul = document.getElementById("ul1");
            //2.复制
            var ul2 = ul.cloneNode(true);
            //3.将复制好的内容添加到div中
            document.getElementById("div1").appendChild(ul2);
        }
 
删除节点
               removeChild()
                     从元素中删除子节点
                     格式:
                         要被删除的元素.parentNode.removeChild(要删除的元素)
        function delSpan () {
            var span = document.getElementsByTagName("span")[0];
            span.parentNode.removeChild(span);
        }
 
节点的属性
                1)innerHTML
                    获取文本内容,元素节点使用,文本节点不能使用(使用 nodeValue)。
                    innerHTML在设置值时可以识别字符串中的html代码并执行
                2)innerText
                    获取文本内容,从起始位置到终止位置的内容, 但它去除Html标签
                3)firstChild
                    获取当前元素节点的第一个子节点
                4)lastChild
                    获取当前元素节点的最后一个子节点
                4)nextSibling
                    获取当前节点的后一个同级节点
                5)previousSibling
                    获取当前节点的前一个同级节点
                6)parentNode
                    获取当前元素的父节点
                7)childNodes
                    获取当前元素的所有子节点
 
操作元素的属性
     1)通过获取元素对象来操作属性
                如:
                var txt =document.getElementById("txt");
                txt.id、txt.value......
            2)通过方法来操作属性
                获取:getAttribute()
                设置:setAttribute()
                删除:removeAttribute()
 
            ----------
            获取标签之间的文本:
                innerHTML innerText 
            获取表单元素的值时:
                value
        var txt = document.getElementsByTagName("input")[0];
        //获取元素属性
        console.log(txt.type);
        console.log(txt.getAttribute("type"));
 
        //设置元素的属性
        txt.value = "123456";
        txt.setAttribute("type","password");
 
        //删除属性
        document.getElementsByTagName("a")[0].removeAttribute("href")
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

以上是关于DOM的主要内容,如果未能解决你的问题,请参考以下文章

React虚拟dom中的key值

DOM事件: DOM事件级别DOM事件流DOM事件模型DOM事件捕获过程自定义事件

虚拟DOM(Virtual Dom) VS 影子DOM(Shadow Dom)

虚拟DOM(Virtual DOM)

关于DOM级别的一些问题,DOM0,DOM1,DOM2

DOM事件类