DOM的学习

今天学习了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 = 0; 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="345" />
    <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 = 0; i < classname.length; i++) {        //通过元素的属性名字获取元素
            alert(classname[i].value)         //显示值
        }
    </script>
    <script>
        var v = document.getElementsByClassName("div");//类选择器的名字
        for (var i = 0; i < v.length; i++) {
            alert(v[i].innerHTML);
        }
    </script>
    <script>
        var r = document.querySelector(".div");    //参数为选择器
        for (var i = 0; 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 = 0; i < 5; 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的开始与结束,相信努力一定会有不一样的结果的。

时间: 2024-08-04 08:31:53

DOM的学习的相关文章

DOM编程 学习笔记(一)

PS:虽然自己JS基本语法算是掌握了,但是其实在JS掌握的只是远远还不够,网页上有太多好看的动态效果都是用JS 做出来的,自己也就仅仅会那么一两个动态的效果,学的只是皮毛...等有空的时候一定要好好的研究那些动态效果 的制作,实在是太炫酷了...先开始DOM的基本语法吧...等DOM和JQuery的基本语法和用法搞定后就去深入的研究 研究那些动态效果的制作... DOM编程 学习内容 1.DOM简单介绍 2.DOM解析方式 3.在网页中使用DOM编程 4.DOM window对象以及Loacti

【DOM】学习笔记

三. 一份文档就是一颗节点树 节点类型:元素节点--属性节点.文本节点 getElementById()返回一个对象,对应一个元素节点 getElementByTagName()返回一个对象数组,分别对应一个元素节点 getAttribute() setAttribute() 四. childNodes nodeType nodeValue firstChild lastChild 五. DOM脚本编程习惯 预留后路 分离JS 向后兼容性 [DOM]学习笔记,布布扣,bubuko.com

HTML DOM(学习笔记二)

嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这就是我们要处理的HTML DOM 也就是一种HTML文档的另一种表现的形式,更加接近我们的HTML文档的表现形式的样式是这样的,如下图所示: 在HTML DOM中,所有的事物都是节点.HTML DOM就是被视为节点树的HTML.根据W3C的HTML DOM标准,HTML文档中所有内容都是节点,如上图

轻松学习JavaScript二十四:DOM编程学习之操作CSS样式(一)

CSS样式作为HTML的辅助,可以增强页面的显示效果.前面学了DOM操作HTML,因此也要学DOM操作CSS 样式的方法.在学习CSS的时候,已经知道了CSS插入到HTML文档有三种情况,分别为:行内式,内嵌式和外联式 (这是我们最常用的).下面就来看怎么操作这三种情况: 一操作行内式 先来写一个HTML文档: <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

DOM扩展学习笔记

对DOM的两个主要扩展是Selectors API(选择符API)和HTML5,还有一个不太瞩目的Element Traversal元素遍历规范为DOM添加了一些属性,另外还有一些专有扩展. 选择符API 元素遍历 HTML5 专有扩展 选择符API 让浏览器原生支持css查询,原理就是所有实现这一功能的JavaScript库都会写一个基础的CSS解析器,然后再使用已有的DOM方法查询文档并找到匹配的节点.当把这个功能变成原生API后,解析和树查询操作可以在浏览器内部通过编译后的代码来完成,极大

HTML DOM(学习笔记一)

嗯,工作也有一段时间了,对编程的认识也深入了一些,以前认为HTML/CSS/JAVASCRIPT是比较简单的,看网上的教程就可以了,W3C是我学习这些知识常去的一个网站,非常感谢她让我学习到了更多的一些关于前端的知识,不过现在我不这样看了,前端工程师们最主要的就是通过这些来工作的(当然考虑的问题肯定是更多更广更深入了,架构问题.兼容性问题.性能问题.还有各种插件.JS库以及前端的各种工具等等),这些内容是非常丰富的,我也是挺感兴趣的并且觉得这样更为专业!至少让我觉得比天天,修改BUG.为客户修改

轻松学习JavaScript十八:DOM编程学习之DOM简单介绍

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分. HTML或XML页面的每一个部分都 是一个节点的衍生物. 通过DOM.可訪问HTML文档的全部元素. 当网页被载入时.浏览器会创建页面的文档对象模 型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了訪问HTML和XML文档的标准."W3C 文档对象模型(DOM)是

DOM基础学习

DOM 查找元素 1.直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 2.间接查找 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 l

轻松学习JavaScript二十二:DOM编程学习之节点操作

DOM编程不仅仅可以查找三种节点,也可以操作节点,那就是创建,插入,删除,替换和复制节点.先来看节点 操作方法: 还是借用一贯的HTML代码: <!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.