Javascript DOM 编程艺术(第二版)读书笔记——DOM基础

1.DOM是什么D=document(文档)O=object(对象)M=Model(模型)DOM又称节点树一些术语:parent(父)   child(子)   sibling(兄弟)   node(节点)  element node(元素节点)   text node(文本节点)    2.获取元素1.getElementById(与typeof操作符)
//getElementById 与 typeof
//typeof操作符可以告诉我们它的操作数是一个字符串、数值、函数、布尔值还是对象
//getElementById会返回一个对象,且该调用只能有一个参数(id参数,且必须放在单引号或双引号里)
alert(typeof  document.getElementById("test")  );
注意,这里的Element是没有“s”结尾的!后面两个才有! 按照书上的测试我们只能得出“document.getElementById("test")”的类型是一个对象,但实际上可以更进一步探讨这是个什么对象(是document对象么?): 
alert( document.getElementById("test-id") );
输出的结果是object HTMLDivElement,这明显不是document对象,至于这个对象和document有何不同,和DOM有什么关系,以后再说(查文档)。同时我也注意到,将这个方法返回的对象赋值给一个变量,该变量的类型将和右值类型相同:
var test_id = document.getElementById("test-id");
alert( test_id );
//输出的结果也是object HTMLDivElement
  另外,我发现文档中称HTMLDivElement为“接口”而不是对象!为什么呢?后面要时刻注意对象、接口是什么东西,参考文章有:1,2,3 2.getElementByTagName
//getElementsByTagName
//只接受标签名作为参数
//返回一个对象数组(数组),每个对象分别对应document对象中的一个tag元素;所以我们可以使用数组对象的属性,比如length alert( document.getElementsByTagName("li").length );
我得先看看这个返回的是什么:
alert( document.getElementsByTagName("p") );
//输出object HTMLCollection
 3.getElementsByClassName
//getElementsByClassName
//以空格来同时指定多个类名——由于返回的只有一个特殊的对象,理所当然的,这里返回的是同时具有testClass、testClassTwo类的标签。
//只接受类名为参数
alert( document.getElementsByClassName("testClass testClassTwo").length );
同样的,我得先知道这个方法返回的是什么东西——这里返回的不是真正意义上的“数组”:
alert( document.getElementsByClassName("test-class") );
//输出的结果是HTMLCollection,这个对象不是Array(数组)而是一个特殊的对象数组,他也有“.length”这个方法,即返回集合中子元素的数目
标记一下,为什么不是返回数组而是返回一个新定义的对象数组?肯定有原因。4.返回的类型是什么,是一个很重要的问题。  var test_id = document.getElementById("test-id");
  var test_items = test_id.getElementsByTagName("*");
  alert(test_items.length);
  //输出该id下有多少个标签
这段代码将正确地输出id为“test-id”下有多少个标签,之所以能这样,是因为“getElementById”返回的是一个document的实例,所以第二行可以对“test_id”使用“getElementsByTagName”这个方法;同样地,因为“getElementsByTagName”返回的是一个特殊的对象,这个对象有“length”这个方法,所以我们才能在alert里面正确地输出。如果我们把第一行和第二行反过来用,比如“某些标签里面的id=test-id的标签有几个?”,就会出错了(这是个伪命题,直接找id就好了,不需要找“某些标签里面的id”)——首先就是“getElementsByTagName”返回的对象是没有“getElem....”这种方法的,其它的就更不用说了。同样地还能这么用:
var test_id = document.getElementById("test-id");
var test_items = test_id.getElementsByClassName("test-class");
alert(test_items.length);
//输出该id下有多少个“test-class”类的标签
 要意识到,文档中的每一个元素都是一个对象,DOM对这些不同的对象都定义了不同的一整套的方法和属性;getElementById返回一个对象,该对象对应文档里一个特定的元素节点。getElementsByClassName、getElementsByTagName返回一个对象数组,它们分别对应文档里的一组特定的元素节点——因为你一次只能改一个元素,所以你如果想借这个操作修改这个数组里某个具体元素的值,你就必须加下标!比如getElementsByClassName("p")[1](这里只是强调下标,实际上不一定是这么写的,真正的写法见下面的例子)之类。 5.childNodes属性前面分别是获取某个id的元素、获取某个标签、获取某个类的元素,现在这个是获取任何一个元素的所有子元素: 3.获取和设置属性1.getAttribute(获取)
//getAttribute
//为了方便,我只写body里的内容。
    <div id="test-id">
        <p title="oneTitle">hello word1</p>
            <h1 class="test-class">
                <p>1</p> 
                <p>2</p> 
            </h1>
        <p title="twoTitle">hello word3</p>
        <p>hello word4</p>
    </div>
    <script>
        var test_items = document.getElementsByTagName("p");
        for(var i = 0 ; i < test_items.length ; i++){
            alert( test_items[i].getAttribute("title") );
        }
    </script> 
//输出的结果依次为:oneTitle、null、null、twoTitle、null
学到这,我注意到:DOM分支下之所以有那么多的对象或者说是接口,其实都是为了针对不同抽象层级的操作而诞生的。比如,文档树里的各个节点的层级,我们操作的目标往往是各个节点的属性。因为不需要获取这个节点本身,所以这里的getAttribute不是document对象的一个方法——它只专注于实现属性相关的操作,所以被独立出来,所以我们这里可以看到,要想调用getAttribute,不能通过document对象调用,而是和其“联用”,即先获取到你想更改的标签的数组(第一行代码),然后再调用节点抽象层级的对象的方法getAttribute(第二行script代码——顺带一说,这里的节点抽象层级的对象其实就是指前面提到的HTMLCollection)。上面一段的可以简单概括为:getAttribute方法是属于HTMLCollection对象的,而HTMLCollection对象是由document对象中的getElementsByTagName等方法返回的结果。其次,要注意到上面这段代码的输出中有“null”,在Javascript里,null的意思是“没有值”。(个别浏览器会在输出null对话框的时候输出空白对话框) 2.setAttribute(设置)
//setAttribute
//为了方便,只给出body内的代码
<div id="test-id">
        <p title="oneTitle">hello word1</p>
            <h1 class="test-class">
                <p>1</p> 
                <p>2</p> 
            </h1>
        <p title="twoTitle">hello word3</p>
        <p>hello word4</p>
    </div>
    <script>
        var test_id = document.getElementById("test-id");
        alert( test_id.getAttribute("title") );
        test_id.setAttribute("title","test-title");
        //测试是否修改了
        alert( test_id.getAttribute("title") );  
</script>
 setAttribute实际操作是这样的:1.当对象属性值为null时(可能有点奇怪,但就是这样:属性没设置就相当于属性不存在,而属性不存在就是属性=null),先创建这个属性,然后设置它的值。2.当属性的值存在时,覆盖掉它。 通过setAttribute对文档做出修改后,浏览器的开发者模式看到的源代码中属性的值并没有改变——其做出的修改不会反映在文档本身的源代码里,是“表里不一”的,这种思想源自DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。这也是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面。——————仔细想想,这是一连串的影响造成的。浏览器解析步骤的开始就是下载HTML文档,生成文档树,然后再渲染CSS、JS,如果JS改了HTML文档,那么浏览器就需要从头开始,也就是整个页面都要重新渲染一次,而这个代价出现的原因居然是修改某个属性值?所以干脆变成“动态刷新”。 

相关内容推荐