今天学习了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. 原创：《Excel在零售及电商行业数据化管理中的应用》之“什么是数据化管理？

    <Excel在零售及电商行业数据化管理中的应用>之“什么是数据化管理?”                     各位: “随着全零售时代的到来,传统商业的每一个供应链细节都离不开数据的支 ...

  2. SAP ERP 与SAP CRM有什么不同？

    SAP ERP 与SAP CRM有什么不同? 从管理理念上来说,ERP是提高企业内部资源的计划和控制能力,讲究的是在满足客户.及时交货的同时最大限度地降低各种成本,通过提高内部运转效率来提高对客户的服 ...

  3. tushare使用

    tushare是获取行情数据的一款免费软件 使用方法很简单, 先安装:pip install tushare 然后 import tushare as ts 即可.   data = ts.get_k ...

  4. (转)在公司的局域网使用git或github 设置代理

    目录 [hide] 1 生成SSH Key 2 git使用http访问 3 git使用ssh进行访问 在公司这样的局域网环境中,向要走网络必须走HTTP代理出去.不能直接访问外面的服务,所以这样安全了 ...

  5. python shlex 模块

    shkex 模块最常见的用法就是其中的split 函数,split 函数提供了和shell 处理命令行参数时一致的分隔方式 代码示例: shlex.split("python -u a.py ...

  6. kubectl error: The connection to the server localhost:8080 was refused

    did you run below commands after kubeadm init To start using your cluster, you need to run (as a reg ...

  7. 垃圾回收机制GC知识再总结兼谈如何用好GC(其他信息: 内存不足)

    来源 图像操作,易内存泄露,边界像素 一.为什么需要GC 应用程序对资源操作,通常简单分为以下几个步骤: 1.为对应的资源分配内存 2.初始化内存 3.使用资源 4.清理资源 5.释放内存 应用程序对 ...

  8. 查看已装TensorFlow的版本和路径

    pyhton Python 2.7.14... >>>import tensorflow as tf >>>tf.__version__ '1.3.0'>&g ...

  9. 阿里云centos7安装桌面环境

    centos7. 1.安装X11.yum groupinstall "X Window System". 2.安装gnome. 全安装:yum groupinstall -y &q ...

  10. Java、C#双语版HttpHelper类(解决网页抓取乱码问题)

    在做一些需要抓取网页的项目时,经常性的遇到乱码问题.最省事的做法是去需要抓取的网站看看具体是什么编码,然后采用正确的编码进行解码就OK了,不过总是一个个页面亲自去判断也不是个事儿,尤其是你需要大量抓取 ...