zoukankan      html  css  js  c++  java
  • DOM

      DOM即文档对象模型。IE中的DOM是以COM对象形式存在的,与其他浏览器不太一样。

      整个网页文档可以看做一颗节点树,其中<html>标签为根节点。

      我们在html中经常把标签称为元素。节点分为三类:1.元素节点 2.文本节点 3.属性节点

    A.元素节点:

    1.getElementById();    

    var box=document.getElementById(box);
    
      alert(box);   

      PS:DOM操作必须等待HTML文档加载完毕,才可以获取。解决办法有:

      (1)将<script>置后

      (2)用onload事件来加载HTML文档

     window.onload=function(){
    
          var box=document.getElementById(box);
    
          alert(box.tagName);   //获取节点的标签名
    
        alert(box.innerHTML);   //获取纯文本,包含html标签
    
        box.innerHTML="玩转<strong>JS</strong>";   //innerHTML可以解析JS
    
      }

    2.getElementsByTagName();

      返回查找标签名的节点元素数组。

    3.getElementByName();

    4.setAttribute("属性",“属性值”)

    5.removeAttribute("属性")

    B.文本节点

      html:

    <div id='box'>测试DIV<em>倾斜</em>结尾</div>

      js:

      var box=document.getElementById('box');
    
      alert(box.childNodes.length);  //3个子节点,其中测试DIV、结尾为文本节点;<em>倾斜</em>为元素节点
    
      alert(box.childNodes[0].nodeType);   //输出1,表示‘测试DIV’为文本节点
    
      alert(box.childNodes[0].nodeValue);  //输出‘测试DIV’

    PS:innerHTML和nodeValue的区别为:innerHTML只适用于元素节点,且可以解析JS;nodeValue只能用于当前节点。

      alert(box.firstChild.nodeValue);   //box的第一个子节点值
    
      alert(box.lastChild.nodeValue);   //box的最后一个子节点值
    
      alert(box.ownerDocument);  //返回根节点

      另外,还有parentNode、previousSibling,nextSibling等方法,不再赘述。

    C.节点操作

      1.创建元素节点p:

      var p=createElement('p');  //还没有添加到文档中
    
      box.appendChild(p); //在某元素节点的最后一个子节点后添加一个节点
    
      var text=document.createTextNode('测试DIV4');  
    
      p.appendChild(text);  //把文本添加到P里

      2.学会编写insertBefore、insertAfter函数

      3.掌握克隆节点方法cloneNode()、replaceChild(),removeChild()等方法。

      

  • 相关阅读:
    event与WaitForSingleObject、MsgWaitForMultipleObjects等
    vc不包含MFC就不打印内存泄露?
    使用visual leak detector(vld)查找内存泄露
    C#里面中将字符串转为变量名
    如何编写nopCommerce插件
    object成员,不见了!
    NopCommerce 定制系列(一):增加 Sha256+Base64 加密
    c#中的二维数组与锯齿数组
    待搞清楚
    NopCommerce 2.5的部署
  • 原文地址:https://www.cnblogs.com/tangzhirong/p/4808186.html
Copyright © 2011-2022 走看看