DOM笔记

时间：2015-05-18 16:22:44 阅读：193 评论：0 收藏：0 [点我收藏+]

标签：

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="width:100px; height:100px; background:red; margin:100px;">
    <div  id="div2" style="width: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. 性能测试方法

DOM笔记

标签：

原文地址：http://www.cnblogs.com/eveblog/p/4511818.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行