今天学习了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. fsck 工具 ——检查 与修复 Linux系统上的文件系统

    可能由于昨天关电脑断电源的问题, 后来开机,直接出现如下界面: 心里想,不会吧,电脑怎么又出问题了吧(上周的时候,手贱,把装系统的硬盘分区设为了非活动分区,电脑就启动不来了,后来手动引导起来的:): ...

  2. Tomcat的Admin和Manager工具初探

    版本说明 apache-tomcat-5.5.28.zip(解压缩版) Manager工具是自带的,Admin工具apache-tomcat-5.5.28-admin.zip需要单独安装 下载地址:h ...

  3. TensorFlow-Python：创建空列表list与append的用法

    1.空list的创建: l = list() 或者: l = [] 2.list中元素的创建和表达 fruits = ['apple', 'banana', 'pear', 'grapes', 'pi ...

  4. touch事件的分发和消费机制

    Android 中与 Touch 事件相关的方法包括:dispatchTouchEvent(MotionEvent ev).onInterceptTouchEvent(MotionEvent ev). ...

  5. [Learn AF3]第三章 App Framework 3组件之Panel：afui的核心

    Panel,afui的核心组件 组件名称:Panel     使用说明:按照官方的说法,panel组件是af3的“核心(heart of the ui)”,panel用于构造应用中独立的内容展示区域, ...

  6. Node.js 模块之 morgan中间件记录日志

    NodeJs中Express框架使用morgan中间件记录日志 Express中的app.js文件已经默认引入了该中间件var logger = require('morgan'); 使用app.us ...

  7. geoserver REST使用

    1.部署一个简单的测试环境 测试geoserver REST接口,我们可使用python来测试,很方便.需要下载包: python,http://python.org/.我下载的是Python27版本 ...

  8. 对SQL语句进行过滤的函数

    /// <summary> /// 过滤SQL非法字符串 /// </summary> /// <param name="value">< ...

  9. python,如何获取字符串中的子字符串，部分字符串

    说明: 比如有一个字符串,python,如何就获取前3位,或者后2位.在此记录下. 操作过程: 1.通过分割符的方式,下标的方式,获取字符串中的子串 >>> text = 'pyth ...

  10. 【高级算法】遗传算法解决3SAT问题（C++实现）

    转载请注明出处:http://blog.csdn.net/zhoubin1992/article/details/46910079 1 SAT问题描写叙述 命题逻辑中合取范式 (CNF) 的可满足性问 ...