JavaScript DOM编程艺术(第二版)--读书笔记(第3章)

172 阅读2分钟

第三章 DOM

1.文档:DOM中的D

当创建了一个网页并把它加载到web浏览器中时,DOM就在幕后悄然而生,它把你编写的网页文档转换成一个文档对象.

2.对象:DOM中的O

  • JavaScript对象的三种类型
    • 用户定义对象
    • 宿主对象
    • 内建对象
  • 宿主对象当中最基础的window对象:window对象对应着浏览器窗口本身,这个对象的属性和方法通常称为BOM.

3.模型:DOM中的M

DOM中的M代表着Model(模型).
DOM把一份文档表示为一棵树:"家谱树模型"

4.节点

  • 元素节点:
  • 文本节点:
  • 属性节点:

5.获取元素

  • 通过元素ID:getElementById,它是document对象特有的函数 document.getElementById("")
  • 通过标签名字:getElementByTagName方法返回一个对象数组
<script >
        var items = document.getElementsByTagName("*")
        for(var i = 0; i<items.length; i++){
            //会弹出所有的元素节点
            alert( items[i]);

        }
        // items的数组里每个值都是一个对象.下面这行代码弹出16
        alert(document.getElementsByTagName("*").length);
</script>
  • 通过类的名字获取:getElementByClassName

6.盘点知识点

  • 一份文档就是一个节点树;
  • 节点分为不同的类型:元素节点; 文本节点 ;属性节点;
  • getElementById返回一个对象,该对象对应着文档里一个特定的元素节点;
  • getElementByClassName和getElementByTagName返回一个对象数组,他们分别对应着文档里一组特定的元素节点;
  • 每个节点都是一个对象

7.获取和设置属性

(1)getAttribute

getAttribute是一个函数,它只有一个参数--你打算查询的属性的名字. getAttribute方法不属于document对象,所以不能通过document对象调用,只能通过元素节点对象调用

(2)setAttribute

setAttribute()允许我们对于属性节点的值做出修改,也只能用于元素节点 object.setAttribute(attribute,value)

  • DOM的强大之处之一:对页面内容进行刷新却不需要再浏览器里刷新页面.