zoukankan      html  css  js  c++  java
  • DOM笔记

    DOM基础
    •什么是DOM
    Dom:英文全称-Document Object Model 译成中文即是:文档对像模型.听起来很术语,其实就是文档内容的结构关系.文档类型可以是HTML或XML 
    Dom具有对Html文件和XML文件元素的访问控制能力,简单点说利用Dom可以对某个html或xml文件添加,修改,删除元素.更改其现有的结构或内容
     
    •浏览器支持情况
    DOM节点
    •childNodes  nodeType  –获取子节点
    在火狐下空格也会把空文本作为子节点计算上
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload=function ()
    {
        var oUl=document.getElementById('ul1');
        
        alert(oUl.childNodes.length);//ie 3 火狐 7 
        
    }
    
    </script>
    </head>
    
    <body>
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    </body>
    </html>
    <script type="text/javascript">
    window.onload=function ()
    {
        t=document.body.childNodes[0].nodeType;
        
        alert(t)// 3 文本节点
        m=document.body.childNodes[1].nodeType;
        alert(m)// 1 元素节点
        
    }
    </script>
    
    
    html:
    
    文本文字
    <Span>123455</Span>
    <script type="text/javascript">
    window.onload=function ()
    {
        var oUl=document.getElementById('ul1');//选出ul
        for(var i=0;i<oUl.childNodes.length;i++){
            //oUl.childNodes[i].style.background='red';//让所有的子节点变红色 火狐下没有变色 
            if(oUl.childNodes[i].nodeType==1){
                oUl.childNodes[i].style.background='red';//判断一下元素节点是否为1 兼容火狐写法
                }
            
            
        }
        
    
    }
    
    </script>
    
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    –children 兼容版的childNodes
    <script type="text/javascript">
    window.onload=function ()
    {
        var oUl=document.getElementById('ul1');
        
        alert(oUl.children.length);//3 
    }
    </script>
    
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
    </ul>

    需要获取第一层的子节点用children是极好的方法

    •parentNode 获取父节点 元素结构html上的父节点
    –例子:点击链接,隐藏整个li
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload=function ()
    {
        var aA=document.getElementsByTagName('a');//选择出所用的a
        
        for(var i=0;i<aA.length;i++){
            
            aA[i].onclick=function(){
                this.parentNode.style.display='none';
                }
            }
        
        
        
    }
    </script>
    </head>
    
    <body>
    <ul>
        <li>aass <a href="javascript:;">隐藏</a></li>
        <li>5453 <a href="javascript:;">隐藏</a></li>
        <li>cvxc <a href="javascript:;">隐藏</a></li>
        <li>ertert <a href="javascript:;">隐藏</a></li>
    </ul>
    </body>
    </html>
    •offsetParent 相对于定位的父节点
    –例子:获取元素在页面上的实际位置
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    
    window.onload=function ()
    {
    var oDiv2=document.getElementById('div2');
      oDiv2.onclick=function(){
        alert(this.offsetParent.tagName);//body
        
        }
    }
    
    </script>
    </head>
    
    <body>
    <div id="div1" style="100px; height:100px; background:red; margin:100px;">
        <div  id="div2" style="100px; height:100px; background:yellow; position:absolute; left:100px; top:100px;"></div>
    </div>
    </body>
    </html>

    如果给div1,加个样式position:relative;这是div1就是div2布局上上父机

    于是点击div2弹出div1

    alert(this.offsetParent.id);//div1

    DOM节点(2)

    •首尾子节点
    –有兼容性问题
    –firstChild 第一个子节点、firstElementChild
    –lastChild 最后一个子节点、lastElementChild
    兼容写法
    var oFirst=oUl.firstElementChild||oUl.firstChild;
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload=function ()
    {
        var oUl=document.getElementById('ul1');
        
        //IE
        //oUl.firstChild.style.background='red';
        
        //FF
        //oUl.firstElementChild.style.background='red';
        
        var oFirst=oUl.firstElementChild||oUl.firstChild;
        
        oFirst.style.background='red';
    }
    </script>
    </head>
    
    <body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    </body>
    </html>
    View Code

    •兄弟节点

    –有兼容性问题
    –nextSibling、nextElementSibling
    –previousSibling、previousElementSibling
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload=function ()
    {
        var oLi=document.getElementById('li1');
        
        oLi.nextSibling.style.background='blue'//下一个兄弟子节点
        oLi.previousSibling.style.background='red';//上一个兄弟子节点
        
        
        
    }
    </script>
    </head>
    
    <body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li id="li1">111</li>
        <li></li>
        <li></li>
    </ul>
    </body>
    </html>
    View Code

    兼容处理和firstChild一样

    操纵元素属性

    元素属性操作
    •第一种:oDiv.style.display=“block”;
    •第二种:oDiv.style[“display”]=“block”;
    •第三种:Dom方式
    DOM方式操作元素属性
    •获取:getAttribute(名称)
    •设置:setAttribute(名称, 值)
    •删除:removeAttribute(名称)
     
    html:
    <
    input type="text" id="txt1"/>

    js:
    window.onload=function ()
    {
        var oTxt=document.getElementById('txt1');
        
        //第一种方法
        //oTxt.value='123'; // 获取value数值
        
        //第二种方法 可以完全替换点的方法
        //oTxt['value']='abc';
        
        //第三章方法 设置元素属性setAttribute
        oTxt.setAttribute('value', 'rtertw');
    //获取元素属性getAttribute
    alert(oTxt.getAttribute(
    'id')); } </script>

    DOM元素灵活查找
    用className选择元素
    •如何用className选择元素
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload=function ()
    {
        var oUl=document.getElementById('ul1');
        var aLi=oUl.getElementsByTagName('li');
        
        
        for(var i=0;i<aLi.length;i++)
        {    //选择出所有的出来class 为box的li变成红色
            if(aLi[i].className=='box')
            {
                aLi[i].style.background='red';
            }
        }
    }
    </script>
    </head>
    
    <body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li class="box"></li>
        <li></li>
        <li class="box"></li>
        <li class="box"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    </body>
    </html>
    View Code

    •封装成函数

    1.选出所有元素
    2.通过className条件筛选
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function getByClass(oParent, sClass)
    {
        var aEle=oParent.getElementsByTagName('*');//通配符 选出所有标签
        var aResult=[];
        var i=0;
        
        for(i=0;i<aEle.length;i++)
        {
            if(aEle[i].className==sClass)
            {
                aResult.push(aEle[i]);//存放所有被选择出来的元素,存放入数组
            }
        }
        
        return aResult;  
    }
    
    window.onload=function ()
    {
        var oUl=document.getElementById('ul1');
        var aBox=getByClass(oUl, 'box');
        var i=0;
        
        for(i=0;i<aBox.length;i++)
        {
            aBox[i].style.background='yellow';
        }
    }
    </script>
    </head>
    
    <body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li class="box"></li>
        <li></li>
        <li class="box"></li>
        <li class="box"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    </body>
    </html>
    View Code

    DOM中级

    1.创建、插入和删除元素

    创建DOM元素
    •createElement(标签名)  创建一个节点
    var oLi=document.createElement('li');//创建li
    

     •appendChild(节点)  追加一个节点

    oUl.appendChild(oLi);// 父.appendChild(子节点)
    –例子:为ul插入li
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload=function ()
    {
        var oBtn=document.getElementById('btn1');
        var oTxt=document.getElementById('txt1');
        var oUl=document.getElementById('ul1');
        
        oBtn.onclick=function ()
        {
            var oLi=document.createElement('li');
            
            oLi.innerHTML=oTxt.value;
            
            //父.appendChild(子节点)
            oUl.appendChild(oLi);
        }
    }
    </script>
    </head>
    
    <body>
    <input id="txt1" type="text" />
    <input id="btn1" type="button" value="创建Li"/>
    <ul id="ul1">
        <li>aaa</li>
    </ul>
    </body>
    </html>
    View Code

    插入元素

    •insertBefore(节点, 原有节点)  在已有元素前插入
    –例子:倒序插入li
    oUl.insertBefore(oLi, aLi[0]);//父.insertBefore(子节点, 谁之前)
    删除DOM元素
    •removeChild(节点)  删除一个节点
    –例子:删除li
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload=function ()
    {
        var aA=document.getElementsByTagName('a');
        var oUl=document.getElementById('ul1');
        var i=0;
        
        for(i=0;i<aA.length;i++)
        {
            aA[i].onclick=function ()
            {
                oUl.removeChild(this.parentNode);
            }
        }
    }
    </script>
    </head>
    
    <body>
    <ul id="ul1">
        <li>sdfsdf <a href="javascript:;">删除</a></li>
        <li>3432 <a href="javascript:;">删除</a></li>
        <li>tttt <a href="javascript:;">删除</a></li>
        <li>ww <a href="javascript:;">删除</a></li>
    </ul>
    </body>
    </html>
    文档碎片
    •文档碎片可以提高DOM操作性能(理论上)
    •文档碎片原理
    •document.createDocumentFragment()
    对比:插入li
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload=function ()
    {
        var oBtn=document.getElementById('btn1');
        var oUl=document.getElementById('ul1');
        
        oBtn.onclick=function ()
        {
            var iStart=new Date().getTime();
            var i=0;
            
            for(i=0;i<100000;i++)
            {
                var oLi=document.createElement('li');
                
                oUl.appendChild(oLi);
            }
            
            alert(new Date().getTime()-iStart);
        }
    }
    </script>
    </head>
    
    <body>
    <input id="btn1" type="button" value="普通"/>
    <ul id="ul1">
    </ul>
    </body>
    </html>
    View Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload=function ()
    {
        var oBtn=document.getElementById('btn1');
        var oUl=document.getElementById('ul1');
        
        oBtn.onclick=function ()
        {
            var iStart=new Date().getTime();
            var oFrag=document.createDocumentFragment();
            var i=0;
            
            for(i=0;i<100000;i++)
            {
                var oLi=document.createElement('li');
                
                oFrag.appendChild(oLi);
            }
            
            oUl.appendChild(oFrag);
            
            alert(new Date().getTime()-iStart);
        }
    }
    </script>
    </head>
    
    <body>
    <input id="btn1" type="button" value="碎片"/>
    <ul id="ul1">
    </ul>
    </body>
    </html>
    View Code

    测试对比还没有普通的快,所以说只是理论上,面试的时候知道就好文档碎片可以dom提高操作性能即可。

     
     

    总结

    DOM基础
    1. DOM简介、DOM标准、DOM节点
    2. 获取元素的子节点:childNodes、兼容性问题
    3. 节点类型:nodeType、文本节点、元素节点
    4. children的使用
    5. 获取元素父节点parentNode
    6. 获取定位元素的父节点offsetParent
    7. 获取首尾子元素:firstChild、firstElementChild、lastChild、lastElementChild
    8. 获取兄弟节点:nextSibling、nextElemnetSibling、previousSibling、previousElementSibling
    9. 元素属性操作:“.”与“[]”回顾、setAttribute、getAttribute、removeAttribute
    10. 通过className获取元素、封装getByClass函数

    DOM中级
    1. 创建元素 createElement、appendChild
    2. 添加元素的性能差异
    3. insertBefore方法及实例
    4. 删除元素:removeChild方法
    5. 文档碎片:document.createDocumentFragment()
    6. 性能测试方法

  • 相关阅读:
    《掌握需求过程》阅读笔记(二)
    《掌握需求过程》阅读笔记(一)
    《软件方法》阅读笔记(三)
    《软件方法》阅读笔记(二)
    《软件方法》阅读笔记(一)
    《大象Think in UML》阅读笔记(三)
    Java中toArray的用法探究(java数组与list转换)
    Eclipse调试常用技巧
    ListView 总结----持续中
    PowerDesigner提示This data item is already used in a primary identifier.的处理
  • 原文地址:https://www.cnblogs.com/eveblog/p/4511818.html
Copyright © 2011-2022 走看看