关闭

《JavaScript学习笔记》:DOM基础

标签: javascriptDOM
239人阅读 评论(0) 收藏 举报
分类:

《JavaScript学习笔记》:DOM基础

DOM 节点

1、childNodes 获取子节点(包括文本节点和元素节点)

2、children 获取子节点(只包括元素节点)

3、nodeType 判断节点类型

  • nodeType =3 :此节点为文本节点
  • nodeType =1 :此节点为元素节点

看一个例子:对上面知识点的一个练习

    <!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=gb2312" />
    <title>无标题文档</title>
    <script>
    window.onload=function()
    {
        var oUl=document.getElementById('ul1');
        var aLi=oUl.childNodes; //获取子节点集,其中包括文本节点和元素节点

        //alert(aLi.length);//结果为5
        for(var i=0;i<aLi.length;i++)
        {
            ////nodeType=3  为文本节点;nodeType=1  为元素节点
            alert(aLi[i].nodeType);
        }

        var aLi=oUl.children;
        alert(aLi.length);  //结果为:2;直接获取的就是元素节点个数(不包括文本节点)

    };
    </script>
    </head>

    <body>
    <ul id="ul1">
        <li>1</li>
        <li>2</li>

    </ul>
    </body>
    </html>

4、parentNode 获取父节点

下面这个例子是对获取父节点这个知识点的应用:每个li中有一个链接,当我们点击这个链接时,整个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=gb2312" />
    <title>无标题文档</title>
    <script>
    window.onload=function()
    {
        var aA=document.getElementsByTagName('a');
        for(var i=0;i<aA.length;i++)
        {
            aA[i].onclick=function()
            {
                this.parentNode.style.display='none';//this.parent就是获取父节点
            };
        }
    };
    </script>
    </head>

    <body>
    <ul id="ul1">
        <li >1 <a href="javascript:" >隐藏</a></li>
        <li >2 <a href="javascript:" >隐藏</a></li>
        <li >3 <a href="javascript:" >隐藏</a></li>
        <li >4 <a href="javascript:" >隐藏</a></li>
        <li >5 <a href="javascript:" >隐藏</a></li>
    </ul>
    </body>
    </html>

5、firstChild firstElementChild :获取第一个子节点,有的浏览器支持firstChild来获取第一个子节点,有的浏览器支持第二种。

为解决兼容器问题,我们可以用if来判断一下,如下:

    function getFirstChild(parent)
    {
        if(parent.firstChild)
        {
            return parent.firstChild;
        }
        else
        {
            return parent.firstElementChild;
        }
    };

要说明的是:firstChild、firstElementChild都是获取第一个子节点,如果第一个子节点是文本节点,即使这个文本节点为空,则也获取的就是文本节点,在IE 11、FireFox中已验证过了,看有的资料显示:有的浏览器会忽略节点之间生成的空白文本节点。

6、lastChild/lastElementChild 获取最后一个子节点,用法与上面类似

7、nextSibling/nextElementSibling 获取下一个兄弟节点

8、previousSibling/previousSibling:获取前一个兄弟节点

根据ClassName选择元素节点

前面我们都是根据id来获取元素节点,我们也可以通过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=gb2312" />
    <title>无标题文档</title>
    <script>
    window.onload=function()
    {
        var aUl=document.getElementById('ul1');

        var aLi=aUl.getElementsByTagName('li');

        var res=[];
        for(var i=0;i<aLi.length;i++)
        {
            if(aLi[i].className=='box')
            {
                res.push(aLi[i]);
            }
        }
        //这样我们就获取到了所有className='box'的li

        for(var i=0;i<res.length;i++)
        {
            res[i].style.background='red';
        }
    };
    </script>
    </head>

    <body>
    <ul id="ul1">
        <li class="box">1</li>
        <li>2</li>
        <li class="box">3</li>
        <li class="box">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li class="li1">8</li>
        <li class="box">9</li>
    </ul>
    </body>
    </html>

为方便重复使用,我们可以封装为一个函数,如下:

    function getByClassName(parent,name)
    {
        var arr=parent.getElementsByTagName('*');
        var res=[];
        for(var i=0;i<arr.length;i++)
        {
            if(arr[i].className==name)
            {
                res.push(arr[i]);
            }
        }
        return res;
    }

DOM方式操作元素属性

前面我们介绍的操作元素属性的方法有两种

1、用点,例如:oTxt.value=’adb’;

2、用方括号,例如:oTxt[‘value’]=’xxx’;

下面就是第三种,obj.setAttribute(name,value);

    <!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=gb2312" />
    <title>无标题文档</title>
    <script>
    window.onload=function()
    {
        var oTxt = document.getElementById('txt1');
        //oTxt.value='adb';
        oTxt['value']='xxx';
        //oTxt.setAttribute('value','asdf');
    };
    </script>
    </head>

    <body>
    <input  id="txt1"type="text"  />

    </body>
    </html>

既然有设置属性,肯定就有获取属性值的方法,如下:

1、obj.getAttribte(name);

对于获取属性值的方法就不举例进行介绍了,比较简答。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:370923次
    • 积分:9678
    • 等级:
    • 排名:第1829名
    • 原创:583篇
    • 转载:14篇
    • 译文:0篇
    • 评论:76条
    联系方式
    有问题欢迎探讨咨询哈
    qq:154943046
    添加注明CSDN博客哈
    博客专栏
    最新评论