今天学习了DOM，感觉学习起来真的没那么简单啦，这不是一个好现象啊，只有依靠自己大补课，嘿嘿，具体的总结了一下，今天学习的其实并不多，仅仅学习了不同的节点类型，但是知识还是蛮碎的，要一点一点的总结，昨天学习的是javascript中的引用类型，也是碎的知识点，而我仅仅总结了具体的类型和其中有关的方法，并没有详细的总结其使用的方法，由于时间都浪费在了看书上面，我感觉我不喜欢什么也不问的去掌握这个知识点，更倾向于系统的学习，然后知道它的具体使用方法和联系，所以还是更希望有一本可以给我方向的javascript书。

一.Node类型

<body>

    <div id="outerdiv">我是外层DIV313

        <div id="centerDiv"> 我是中层DIV

            <div id="innerDiv">我是内层div</div>

            内层div结束

        </div>

        我是最后一个空白节点

    </div>

     <script>

         var outchildnode = document.getElementById("outerdiv");//首先获取父节点div

         for (var i = ; i < outchildnode.childNodes.length; i++) {

             alert(outchildnode.childNodes[i].nodeValue);       //仅仅遍历出了父节点的子节点的值，而子节点的子节点则显示为null

         }

         alert(childnode.firstChild.nodeType);   //nodeType在这里是输出节点的类型,1表示的是元素节点；2表示的是实行节点；3表示的是文本节点

         alert(childnode.firstChild.nodeValue);

         //获取div的第一个节点，在这里需要注意的是子节点包括文本、元素和属性节点，所以第一个即是文本节点，而nodeVaule是现实节点的值

         alert(childnode.lastChild.nodeName);       //获取的是最后一个节点,nodeName显示的是文本节点#text

     </script>

</body>

说起来node类型，在这里主要举例说明了nodeType和nodeValue、nodeName，其实这三个属性看起来还是蛮容易记得的，但是在使用起来在细节上面还是要注意的，nodevalue仅仅遍历出了父节点的下一个节点的值，和子节点的子节点没有关系等，这三个属性使用起来还是要细心的。

二.Document类型

<body>

    <p>

        hello world p标签1

    </p>

    <p>

        hello world p标签2

    </p>

    <p id="p">Hello</p>

    <p>Tom</p>

    <p>Cruise</p>

    <input type="text" name="txtname" value="123 " />

    <input type="password" name="txtname" value="" />

    <div class="div">

        Hello World div

    </div>

    <div class="div">

           Hello World div

    </div>

   <div>

          Hello World

   </div>

    <script>

        var p = document.getElementsByTagName("p");   //在这里使用getElementsByTagName方法的参数是一个标签元素，我们主要是通过p标签来获取元素的

        alert(p.length);              //当打印长度都即可知道存在p标签元素

    </script>

        <script>

        var pname = document.getElementById("p");       //通过id获取html中的元素

        alert(pname.innerHTML);        //把内容显示在信息框中

    </script>

    <script>

        var classname = document.getElementsByName("txtname");

        for (var i = ; i < classname.length; i++) {        //通过元素的属性名字获取元素

            alert(classname[i].value)         //显示值

        }

    </script>

    <script>

        var v = document.getElementsByClassName("div");//类选择器的名字

        for (var i = ; i < v.length; i++) {

            alert(v[i].innerHTML);

        }

    </script>

    <script>

        var r = document.querySelector(".div");    //参数为选择器

        for (var i = ; i < r.length; i++) {

            alert(r[i].innerHTML);

        }

    </script>

</body>
<script>

        function insertP(text) {

            var str = "<p>";

            str += text;

            str += "</p>";

            document.write(str);

        }

    </script>
<body>

    <p id="ppp">p标签</p>

    <script>

        alert(document.write("<p>我是动态的P标签</p>")); //可以使用write动态添加一个p标签，但是一般把它封装为一个方法，适用于多次添加同一元素的内容

        for (var i = ; i < ; i++) {

            insertP("我是动态的P标签");    //连续插入该文本信息5次

        }

    </script>

</body>

总结Document类型，我想说的是在这里首先总结了获取元素的几种方式，可以通过其元素的名称，id名称等，在上面的最后一种方式之前是存在的，但是现在似乎不能使用了，我目前还不知，然后是方法write的使用，即文档写入，而write方法可以原样输出，这个类型使用起来还是容易记得的，嘿嘿。

三.Element类型

<body>

      <div id="div" class="divclass" name="divname">

       <script>

           //var div = document.getElementById("div");    //获取div元素

           //var divattribute = div.getAttribute("class");      //通过getAttribute获取div元素中的属性

           //alert(divattribute);

           var setattribute = div.setAttribute("name", "divdiv");   // 接受两个参数，第一个为要设置的特性名，第二个为设置的值

           alert(div.getAttribute("name"));

           var remove = div.removeAttribute("name");           //彻底删除元素特性的值，而且也会从元素中删除特性

           alert(div.getAttribute("name"));                 //当显示null时间说明已经删除该特性

       </script>

</body>

在这里，我刚开始一直是写的alert（setattribute ），然后提示未定义，感觉还是蛮奇怪的，那时间就误把它当做一个变量,认为输出即可，还是太天真了，其实根本就却不是这样的，具体的应该是设置完新的值后需要获取元素的值，并不能直接输出，在一友友的帮助下反应过来啦，嘿嘿，这样的写法其实只能归于自己不熟悉，方法的使用都不知道，希望下次能够我注意。而在这里关于Element类型主要是取得元素特性和获取元素特性，甚至可以清除元素的特性。

var p = document.createElement("p");  //创建新元素
<body>

    <div id="div">div元素</div>

    <script>

        var p = document.createElement("p");  //创建新元素

        var doc = document.createTextNode("我是text元素");//创建文本元素

        p.appendChild(doc);         //追加子节点

        document.getElementById("div").appendChild(p);     //把p标签添加到div元素中

    </script>

</body>

这里是创建新元素，嘿嘿，还是可以动态的添加元素的子节点的。前面用到Element的方法如果使用熟练，那么在这里就可以简单的练习下即可，这里还是很好理解的。

四.其他类型

其他类型还有Text类型、Comment类型、CDATASection类型、DocunmentType类型、DocunmentFragment类型和Attr类型等，而上面的一个例子中写的，创建文本元素，是属于Text类型的，现在的我们仅仅简单的学会创建文本节点即可，其他的类型我也只是了解。

嘿嘿，今天就写到这里，还有好多小知识点没有很熟练的掌握，到今天为止学习javascript已经是四天，感觉学的还是蛮多的，记得周一仅仅知道了javascript的存在（http://www.cnblogs.com/dyxd/p/4204278.html）；周二讲的是基本概念：语法、关键字、数据类型、操作符以及一些语句的使用（if、if...else..、while、do...while、for以及for...in等）；周三讲的就是引用类型（http://www.cnblogs.com/dyxd/p/4204278.html）；今天的内容就是DOM,在四天的时间里面学习的东西还是蛮多的，不过最重要的是我要一点一点的消化。学习是一个循序渐进的过程，也是1=1的开始与结束，相信努力一定会有不一样的结果的。

DOM的学习的更多相关文章

  1. HTML DOM（学习笔记二）

    嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...

  2. DOM编程 学习笔记（一）

    PS:虽然自己JS基本语法算是掌握了,但是其实在JS掌握的只是远远还不够,网页上有太多好看的动态效果都是用JS 做出来的,自己也就仅仅会那么一两个动态的效果,学的只是皮毛...等有空的时候一定要好好的 ...

  3. HTML DOM简易学习笔记

    文字版:https://github.com/songzhenhua/github/blob/master/HTML DOM简易学习笔记.txt 学习地址:http://www.w3school.co ...

  4. HTML DOM（学习笔记一）

    嗯,工作也有一段时间了,对编程的认识也深入了一些,以前认为HTML/CSS/JAVASCRIPT是比较简单的,看网上的教程就可以了,W3C是我学习这些知识常去的一个网站,非常感谢她让我学习到了更多的一 ...

  5. DOM扩展学习笔记

    对DOM的两个主要扩展是Selectors API(选择符API)和HTML5,还有一个不太瞩目的Element Traversal元素遍历规范为DOM添加了一些属性,另外还有一些专有扩展. 选择符A ...

  6. 轻松学习JavaScript十八：DOM编程学习之DOM简单介绍

    一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分 ...

  7. HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  8. HTML5的 2D SVG和SVG DOM的学习笔记（1）

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

  9. 【DOM】学习笔记

    三. 一份文档就是一颗节点树 节点类型:元素节点——属性节点.文本节点 getElementById()返回一个对象,对应一个元素节点 getElementByTagName()返回一个对象数组,分别 ...

随机推荐

  1. IntelliJ IDEA 13.1.3 SVN无法正常使用问题

    http://my.oschina.net/luckyi/blog/291007 最新升级IDEA12到13版本,升级后发现IDEA中SVN无法正常使用,但文件夹下能够正常使用. 并且报错:svn: ...

  2. 关于Unity的NGUI

    NGUI是严格遵循KISS原则并用C#编写的Unity(适用于专业版和免费版)插件,提供强大的UI系统和事件通知框架 KISS原则:Keep It Simple,Stupid NGUI实例 1.创建U ...

  3. Mac 创建证书（以 创建gdb证书 为例 ）

    open /Applications/Utilities/Keychain\ Access.app/ 打开 钥匙串访问 继续继续 创建完毕. Now that we have a certificat ...

  4. Json---Linux下使用Jsoncpp

    一.安装 scons 下载地址:http://sourceforge.net/projects/scons/files/scons/2.1.0/scons-2.1.0.tar.gz/download ...

  5. com.alibaba.dubbo.rpc.RpcException: Failed to invoke the method

    查看了网友们的错误原因, 需要进行实例化的类没有进行实例化,具体没有实例化的类会在错误信息中显示,在错误信息中搜索“Serializable”即可找到将其实现序列化可消除错误. 是在使用Dubbo提供 ...

  6. Lemon OA第1篇：简单介绍

    官方网站:http://www.mossle.com/ 声明:我不是Lemon OA作者,只是分享好的资源.以下内容均代表个人见解~ 从官网说起 知道Lemon OA,也是最近研究Activiti,看 ...

  7. 每天一个linux命令: /etc/group文件详解

    Linux /etc/group文件与/etc/passwd和/etc/shadow文件都是有关于系统管理员对用户和用户组管理时相关的文件.linux /etc/group文件是有关于系统管理员对用户 ...

  8. 面向切面编程（AOP）简介

    在软件中,有些行为对于大多数应用都是通用的.日志,安全和事务管理几乎是所有软件都需要的.他们是否可以主动的参与呢,如果让应用程序只关注与自己所针对的业务领域问题,而其他的问题有其他应用对象来处理.是否 ...

  9. nginx-windows版

    nginx  windows版,添加 分别是: 重启.启动.停止 下载地址:https://files.cnblogs.com/files/007sx/nginx-windows.zip

  10. shell特殊符号cut命令 sort_wc_uniq命令 tee_tr_split命令 shell特殊符号

    shell特殊符号cut命令 特殊符号 *  通配符,任意个任意字符 ? 任意一个字符 # 注释字符 \  脱义字符 c=\$a\$b echo  $c | 管道符 cat  1.txt |less ...