Dom初

DOM基础
•什么是DOM
•浏览器支持情况
lDOM节点
•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 ()
{
    alert(document.body.childNodes[1].nodeType);
}
</script>
</head>

<body>
aaafsa
<span>fff</span>
</body>
</html

 

–children
•parentNode
PE 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 ()
{   //获取oul
    var oUl=document.getElementById('ul1');
    var i=0;
    //oul的弟节点
    for(i=0;i<oUl.childNodes.length;i++)
    {                 //的返回类型是真
        if(oUl.childNodes[i].nodeType==1)
        {            //背景设置红色
            oUl.childNodes[i].style.background='red';
        }
    }
}

</script>
</head>

<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</ht

 

–例子：点击链接，隐藏整个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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parentNode</title>
<script>
window.onload=function()
{
    //获取a数组节点
    var aA=document.getElementsByTagName('a');
    var i=0;
    //循环a[index]数组
    for(i=0; i<aA.length; i++)
    {
        aA[i].onclick=function()
        {
            //获取a数组的父节点li设置属性为隐藏！
            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>
View Code

 

•offsetParent
–例子：获取元素在页面上的实际位置
 
DOM节点
•首尾子节点
有兼容性问题
firstChild、firstElementChild
lastChild 、lastElementChild
•兄弟节点
–有兼容性问题
nextSibling、nextElementSibling
previousSibling、previousElementSibling
 
操作元素属性
元素属性操作
•第一种：oDiv.style.display=“block”;
•第二种：oDiv.style[“display”]=“block”;
•第三种：Dom方式
DOM方式操作元素属性
•获取：getAttribute(名称)
•设置：setAttribute(名称, 值)
•删除：removeAttribute(名称)
 
DoM元素灵活查找
用className选择元素
•
–通过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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>

</style>
<title>用class选择元素</title>
<script>
function getByClass(oParent, sClass)
{
    //获取obj的所有节点
    var aEle=oParent.getElementsByTagName('*');
    var aResult=[];
    var i=0;
    //循环obj[index];
    for(i=0; i<aEle.length; i++)
    {
        //判断obj的元素属性是否等于sclass
        if(aEle[i].className==sClass)
        {
            //添加到数组aresult里
            aResult.push(aEle[i]);
            }
        }
    //返回值给这个函数
    return aResult;
    }
window.onload=function()
{
    //获取ul1
    var oUl=document.getElementById('ul1');
    //启动函数
    var aBox=getByClass(oUl, 'box');
    
    var i=0;
    for(i=0; i<aBox.length; i++)
    {   //循环class等于box的元素index的背景设置成黄色
        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>

 

知识点
DOM节点：parentNode、childNodes、nodeType、children
元素属性：getAttribute、setAttribute、removeAttribute
用class选取元素
 
posted @ 2016-05-31 08:26  distant-遥远  阅读(138)  评论(0)  编辑  收藏  举报