《JavaScript学习笔记》:DOM基础

《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);

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

你可能感兴趣的:(JavaScript,dom)