《JavaScript学习笔记》：DOM基础

最新推荐文章于 2024-04-20 11:50:28 发布

HelloWorld_EE

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量574

点赞数

分类专栏： javascript 文章标签： javascript DOM

本文链接：https://blog.csdn.net/u010412719/article/details/51547831

版权

javascript 专栏收录该内容

22 篇文章 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);

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

HelloWorld_EE

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript学习笔记》：DOM基础

《JavaScript学习笔记》：DOM基础DOM 节点1、childNodes 获取子节点（包括文本节点和元素节点）2、children 获取子节点（只包括元素节点）3、nodeType 判断节点类型 nodeType =3 ：此节点为文本节点 nodeType =1 :此节点为元素节点看一个例子：对上面知识点的一个练习 <!DOCTYPE htm
复制链接

扫一扫