今天学习了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. 实验四 使用ASP.NET内置对象 总结

    这次实验内容是ASP.NET的一些内置对象的熟悉,感觉看到了上学期JSP的影子,很多地方都很像.像Response对象,Request对象,Context对象等等.以前我老是搞混Response对象和 ...

  2. (笔记)Linux下C语言实现静态IP地址,掩码,网关的设置

    #include <sys/ioctl.h> #include <sys/types.h> #include <sys/socket.h> #include < ...

  3. Cisco无线控制器配置Radius

    使用Cisco无线控制器管理AP,配置Radius服务器,用于企业加密wifi的认证. 结合上一篇文档进行操作: http://www.cnblogs.com/helloworldtoyou/p/80 ...

  4. JUnit注解

    在本节中,我们将提到支持在JUnit4基本注释,下表列出了这些注释的概括: 注解 描述 @Testpublic void method() 测试注释指示该公共无效方法它所附着可以作为一个测试用例. @ ...

  5. 简单入门dos程序

    --1.关机程序 注意:文件保存为.bat echo 晚安了,宝贝! @echo off shutdown -s -t exist --2.快捷/批量启动程序 title "程序系统启动&q ...

  6. Java虚拟机性能管理神器 - VisualVM（4） - JDK版本与VisualVM版本对应关系

    Java虚拟机性能管理神器 - VisualVM(4)    -  JDK版本与VisualVM版本对应关系 JDK版本与VisualVM版本对应关系说明 JDK版本与VisualVM版本对应关系 参 ...

  7. Windows下安装Oracle12C（一）

    1,在官网上下载oracle的压缩文件,两个都要下载. 并两个同时选中解压在一个文件夹里面. 2,解压之后,如下图,点击setup.exe稍等一会儿 ,3,开始安装: 不选点击下一步,或者直接点击下一 ...

  8. [译]Angular-ui 之 多命名视图（Multiple Named Views）

    ◄上一篇 (Nested States & Nested Views)     下一篇 (URL Routing) ► 你可以给你的视图命名,以便可以在单个模版当中拥有一个以上的 ui-vie ...

  9. 基于PHP采集数据入库程序（二）

    在上篇基于PHP采集数据入库程序(一) 中提到采集新闻信息页的列表数据,接下来讲讲关于采集新闻具体内容 这是上篇博客的最终数据表截图: 接下来要做的操作就是从数据库中读取所需要采集的URL,进行页面抓 ...

  10. 非抢占式RCU中关于grace period的处理（限于方法）

    参考自:http://blog.csdn.net/junguo/article/details/8244530             Documentation/RCU/* TREE_RCU将所有的 ...