zoukankan      html  css  js  c++  java
  • javascript-----DOM文档对象模型

    javascript-----DOM文档对象模型

     

    1.DOM分类

      DOM:文档对象模型,提供了添加、移动、该变、或移除的结构文档的方法和属性

    DOM Core:锁定一批标签,看成dom对象,进行业务分析
    HTML DOM :把标签和属性看成是一个DOM,即HTML 文档对象
    CSS DOM :style.cssText
          style.属性名:

    2.  HTML文档中的每个成分都是一个节点

    1〉整个文档时一个文档节点

    2〉每个HTML是一个元素节点

    3〉每个HTML中的文本是一个文本节点

    3.   获取当前节点的子节点集合childNodes,写的时候有空格的话会影响结果,所以应该先获取节点信息,然后判断节点类型(nodeType),1:element 元素节点 ;2:attr  属性节点;   3:#text 文本节点;

    例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    window.onload=function(){
        // 能力检测  查看浏览器内核引擎内有没有某个属性
        var str=document.getElementById("box");
        //能力检测
        var  str1=str.childNodes;
        for ( var i=0;i<str1.length;i++) {
            if (str1[i].nodeType==1) {
                alert(str1[i].innerHTML);
            }
        }
        };

    4. 创建和插入节点 

     1〉A(父级对象).appendChild(dom); 

    2〉  insertBefore(A,B)  表示将A插入到B对象之前

    例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    window.onload=function(){           //动态的构建一个div
            var str=document.createElement("div");
            str.innerHTML="我是div";
            var bo=document.getElementById("mine");
            var myul=document.getElementById("box");
            bo.insertBefore(str,myul);
            var ss=document.getElementById("first");
            ss.style.background="red";
            };

     

    5.替换和删除节点
    replaceChild()

     例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    window.onload=function(){   //等待所有的html标签,img。css。js加载完毕后执行
          //删除节点 ,A.removeChild(子元素对象)
          /*    var dom=document.getElementById("first");
              
             var box=document.getElementById("box");
            
             
             box.removeChild(dom); */
     
    //替换节点
          };
          function myreplace(){
            var myfirst=document.getElementById("first");
            var dom=document.createElement("li");
            dom.innerText="打游戏";
            var box=document.getElementById("box");
             
            box.replaceChild(dom,myfirst);
          }
           
          

    6.操作节点样式

    1〉dom.style.属性名="属性值";规则:碰到有-的,去掉-,后面的第一个字母变成大写;

    2〉一次设置n个样式:dom.style.cssText="属性名1:属性值1;属性名2:属性值2";

    例:

    1
    2
    3
    4
    5
    var dom=document.getElementById("first");
            /* dom.style.属性名="属性值";           dom.style.backgroundColor="pink";
                 dom.style.fontSize="30px"; */
             dom.style.cssText="background-color:pink;font-size:30px;";
          };

    7. 1〉offsetLeft:类似于css中的margin-left;返回他与父级边框之间的距离,但是父级元素必须有相对定位,否则返回的是本身与浏览器边框之间的距离;

    例:

    1
    2
    3
    4
    5
    window.onload=function(){
    var small=document.getElementById("small");
    var left=small.offsetLeft;
    alert(left);
    };

     2〉scrollTop:返回匹配元素的滚动条的垂直位置

    例:

    1
    2
    3
    4
    5
    6
    window.onscroll=function(){
        var height=document.documentElement.scrollTop||document.body.scrollTop;
        document.title=height;
        var bigBox=document.getElementById("big");
        bigBox.style.cssText="margin-top:"+height+"px";
        };

    8.dom.className="class属性值";  规则:配合样式表使用

    例:

    1
    2
    3
    4
    5
    6
    7
    8
    window.onload=function(){   //等待所有的html标签,img。css。js加载完毕后执行
             
          };
          function addStyle(){
            var dom=document.getElementById("first");
             dom.className="mystyle";
          }
          

      

    <!DOCTYPE html>
    <html>
      <head>
        <title>访问节点</title>
        
    
        <script type="text/javascript">
            /*
        * nodeName:
        *  元素节点显示的是标签名称
        *  属性节点显示的是属性名称
        *  文本节点显示的是 #text
        *  文档节点显示的是#document
        * nodeValue;
        * 文本节点显示的是文本
        * 属性节点显示的是属性值
        *
        * nodeType:
        * 1  元素节点
        * 2  属性节点
        * 3  文本节点
        * 8   注释
        * 9   文档
        * */
        window.onload=function(){
        var ul=document.getElementsByTagName("ul")[0];
        /* alert("节点名称:"+ul.nodeName);
        alert("节点的类型:"+ul.nodeType); */
        //获得ul中的第一个li
        var li=ul.firstElementChild;
        alert("节点的名称:"+li.nodeName);
        alert("节点的类型:"+li.nodeType);
        alert("节点的内容:"+li.childNodes[0].nodeValue);// alert("节点的内容:"+li.innerHTML);都能获得
        
        //给变猫图片的宽度
        var image=document.getElementsByName("cat")[0];
        image.setAttribute("width","200px");
        //获得图片的src的值
        alert(image.getAttribute("src"));
        
        };
        
        
        </script>
      </head>
      
      <body>
        <ul>
        <li>小强1</li>
        <li>小强2</li>
        <li>小强3</li>
        </ul>
        <img name="cat" src="images/cat.jpg">
      </body>
    </html>

     

    <!DOCTYPE html>
    <html>
      <head>
        <title>节点的增删改</title>
      <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <script type="text/javascript">
        window.onload=function(){
            var ul=document.getElementsByTagName("ul")[0];
            //新增节点
            var newli=document.createElement("li");
            newli.innerHTML="小黑";
            ul.appendChild(newli);
            //获得ul第三个li
            var second=ul.getElementsByTagName("li")[2];
            ul.insertBefore(newli,second);//把创建的元素添加到小强3的前面
            //删除节点
            var reNode=ul.getElementsByTagName("li")[0];
            //ul.removeChild(reNode);
            //替换节点
            ul.replaceChild(newli,reNode);
        };
        </script>
      </head>
      
      <body>
        <ul>
        <li>小强1</li>
        <li>小强2</li>
        <li>小强3</li>
        </ul>
        <div id="d"></div>
      </body>
    </html>
    <!DOCTYPE html>
    <html>
      <head>
        <title>新增输入框</title>
        
        <script type="text/javascript">
        window.onload=function(){
        var btn= document.getElementById("btn");
        var ul=document.getElementById("u");
        //点击事件
        btn.onclick=function(){
        var li =document.createElement("li");//创建li标签
        var input=document.createElement("input");//创建input标签
        input.setAttribute("type","text");
        input.setAttribute("placeholder","请输入内容");
        li.appendChild(input);
        ul.appendChild(li);
        
        
        };
        };
        
        
        
        </script>
      </head>
      
      <body>
       <input type="button" value="新增" id="btn">
       <ul id="u"></ul>
      </body>
    </html>
    <html>
      <head>
        <title>table对象</title>
        
        <script type="text/javascript">
        window.onload=function(){
        var table=document.getElementById("myTable");
        var btn1=document.getElementById("btn1");
        var btn2=document.getElementById("btn2");
        //显示表格总行数
        btn1.onclick=function(){
        alert(table.rows.length);
        
        };
        //显示第二行第二例的单元格的内容rows是一个数组 cells也是一个数组显示表格内容
        btn2.onclick=function(){
        alert(table.rows[1].cells[1].innerHTML);
        
        
        };
        
        
        };
        
        </script>
      </head>
      
      <body>
        <input type="button" value="显示表格总数" id="btn1" >
        <input  type="button" value="显示第二行的第二例的单元格内容" id="btn2">
        <table id="myTable" border="1px">
            <tr>
            <td>第一行第一列</td>
            <td>第一行第2列</td>
            <td>第一行第3列</td>
            </tr>
            <tr>
            <td>第2行第一列</td>
            <td>第2行第2列</td>
            <td>第2行第3列</td>
            </tr>
               <tr>
                <td>第3行第一列</td>
                <td>第3行第2列</td>
                <td>第3行第3列</td>
                </tr>
         
        </table>
        
        
        
      </body>
    </html>
    <html>
      <head>
        <title>新增和删除行</title>
    
        <script type="text/javascript">
        window.onload=function(){
            var table=  document.getElementById("myTable");
               var btn1=  document.getElementById("btn1");
               var btn2=  document.getElementById("btn2");
                //新增insertRow(index)
                btn1.onclick=function(){
                var row=table.insertRow(0);
                //给行新增列    并且给列赋值
                row.insertCell(0).innerHTML="新增行的列1";
                row.insertCell(1).innerHTML="新增行的列2";
                row.insertCell(2).innerHTML="新增行的列3";
                
                };
                btn2.onclick=function(){
                table.deleteRow(table.rows.lenth-1);
                
                };
                
                
        };        
        
        
        
        
        </script>
        
      </head>
      
      <body>
        <input type="button" value="新增" id="btn1" >
        <input  type="button" value="删除最后一行" id="btn2">
        <table id="myTable" border="1px">
            <tr>
            <td>第一行第一列</td>
            <td>第一行第2列</td>
            <td>第一行第3列</td>
            </tr>
            <tr>
            <td>第2行第一列</td>
            <td>第2行第2列</td>
            <td>第2行第3列</td>
            </tr>
               <tr>
                <td>第3行第一列</td>
                <td>第3行第2列</td>
                <td>第3行第3列</td>
                </tr>
        </table>
        
      </body>
    </html>

     

  • 相关阅读:
    CF850A Five Dimensional Points 题解
    AT3963 [AGC024F] Simple Subsequence Problem 题解
    jquery事件绑定机制
    前端初级词汇
    一个checkbox细节处理方式(checkbox与后面的文字对其)
    转 CSS hack:针对IE6,IE7,firefox显示不同效果
    想到的几点页面规范
    jQuery UI Dialog:Demo2:实用技巧
    zindex
    递归示例
  • 原文地址:https://www.cnblogs.com/laosunlaiye/p/7055841.html
Copyright © 2011-2022 走看看