关闭

《JavaScript学习笔记》:DOM基础

标签: javascriptDOM
362人阅读 评论(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
查看评论

[学习笔记]JavaScript之DOM基础

DOM概述 DOM定义 DOM(文档对象模型,Document Object Model)是W3C组织开发的一套便于操作XML和HTML的JavaScript方法,其将XML和HTML抽象成文档对象(Document),并将其中所有的标签和内容都抽象成对象(节点),利用面向对象的思对XML和...
  • jacobvv
  • jacobvv
  • 2015-01-18 22:20
  • 1343

尚硅谷_JS DOM编程_学习笔记

DOMDOM:Document Object Model(文本对象模型) D:文档 – html 文档 或 xml 文档 O:对象 – document 对象的属性和方法 M:模型 DOM 是针对xml(html)的基于树的API。 DOM树:节点(node)的层次。 DOM 把一个文档表示为一棵...
  • u012195214
  • u012195214
  • 2017-04-21 00:03
  • 277

javaScript DOM编程基础

javaScript Document Object Model; Document:文档,html文档与xml文档 Object:对象,javaScript document对象方法及属性 Model:模型 DOM是针对xml、html的基于树的API,DOM树定义了节点Node的接口以及许多节点...
  • niaonao
  • niaonao
  • 2016-12-21 14:16
  • 2210

javascript基础学习笔记

编者寄言:  本文主要为编者读书笔记,在文章里面很多话是掺杂了编者自己的见解,如果有哪里出现错误或者用词不严谨,请友善留言,编者会及时去更改。 本文很多地方只是简单说了一下应该注意的地方,具体代码部分请自行上网查找,给您带来的困扰,非常抱歉。 这篇文章的主要目的是给一些自学 以及 对 ja...
  • u012967849
  • u012967849
  • 2016-07-20 14:08
  • 1954

JS基础学习笔记整理

JavaScript是一种基于对象的脚本编程语言,是浏览器上的程序语言。当web容器输出内容到浏览器时,这个内容是包含js源代码的,此时,JavaScript可以操作浏览器上的一切内容,在浏览器上提供用户交互,页面美化,增加页面的智能性。 JavaScript是一种基于对象的语言,通过 JavaS...
  • laoma4102
  • laoma4102
  • 2011-12-30 13:30
  • 7103

js学习笔记(比较全)

什么是JavaScript? 1. JavaScript 是一种客户端脚本语言(脚本语言是一种轻量级的编程语言)。 2. JavaScript 通常被直接嵌入 HTML 页面。 3. JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。 特点: 1....
  • jiangzhongwei_
  • jiangzhongwei_
  • 2016-07-22 20:12
  • 601

JavaScript_DOM编程艺术第二版学习笔记-第7章

动态创建标记 传统技术:document.write和innerHTML 深入剖析DOM方法:createElement、createTextNode、appendChild和insertBefore。 一、传统方法1.1 document.write 利用document.write...
  • sofia92
  • sofia92
  • 2015-12-16 09:20
  • 792

javaScript DOM操作技术

在一般情况下我们操作DOM都比较简单明了,尤其是jquery出来之后,我们会发现操作DOM变得如此简单,但是也会有许多隐藏的坑,所以有时候操作DOM也并非想象中那么简单; 简单而常用的操作: 访问节点 document.getElementById()    根据Id获...
  • liaodehong
  • liaodehong
  • 2016-06-16 20:53
  • 1980

js面向对象学习笔记之九(BOM 与 DOM 中常用属性分析)

一  BOM对象 window 的 相关属性 1. 用户配置机器配置对象 navigator navigator.userAgent //该属性可以查看用户机器浏览器的配置 "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Ma...
  • wujiangwei567
  • wujiangwei567
  • 2015-06-08 15:35
  • 955

[学习笔记]JavaScript基础--DOM基础

//封装成一个函数 function getByClass(oParent, sClass) { var aResult = [];//把找到的元素放进这个数组 var aEle = oParent.getElement...
  • Mr_Lan_
  • Mr_Lan_
  • 2015-08-07 01:26
  • 205
    个人资料
    • 访问:701251次
    • 积分:12700
    • 等级:
    • 排名:第1306名
    • 原创:606篇
    • 转载:14篇
    • 译文:0篇
    • 评论:115条
    联系方式
    有问题欢迎探讨咨询哈
    qq号就不留了哈
    欢迎留言
    博客专栏
    最新评论