Garden of Sinners
0%

《JavaScript DOM编程艺术》第三章读书笔记

Posted on Edited on In ,

DOM解释

  • D: 网页文档
  • O：对象，自足的数据集合。JS里的对象可以分为三种类型
    1. 用户定义对象(user-defined object): 由程序员自行创建的对象
    2. 内建对象(native object): 内建的js对象，如Array，Math
    3. 宿主对象(host object): 由浏览器提供的对象
  • M： (X)HTML所代表的节点树模型

元素节点

元素节点时DOM中的原子，其包含文本节点和属性节点。<P>为元素节点，<p>xxx</p>包含的xxx为文本节点，<p title='x'></p>中的title为属性节点

获取元素节点

  1. getElementById
    document.getElementById("<id>")
  2. getElementsByTagName
    返回一个对象数组，每个对象分别对应这文档里给定标签的一个元素。
    document.getElementsByTagName("li")
    如果你想知道某份文档里共有多少个元素节点，可以使用通配符
    document.getElementsByTagName("*").length
    话可以将getElementById和getElementsByTagName结合起来，
1
2
var shopping = document.getElementById("purchases");
var items = shopping.getElementsByTagName("*");
  1. getElementsByClassName
    返回一个具有相同类名的元素的数组。
    document.getElementsByClassName("sale);

获取和设置属性

  1. getAttribute
    该方法不属于document对象，所以不能通过其调用，它只能通过元素节点对象吊桶。
    object.get.Attribute(attribute);
  2. setAttribute
    object.setAttribute(attribute, value);

通过setAttribute()方法对文档作出的改变，但这张改变并未反映到源代码中，也就是说，源代码中属性值仍旧是原来的属性值。这种“表里不一”的现象缘于DOM的工作模式：先加载文档的静态内容，再以动态方式对它们进行刷新，动态刷新不改变文档的静态内容，而对页面内容的刷新，不需要用户在他们的浏览器里执行刷新操作就可以实现。

个人对这句话的理解时，你在console中运行setAttribute的DOM操作不会影响静态的html源代码，但是浏览器已经将你的修改运行到了渲染中。比如你在console中修改attribute href, 源代码不会改变，但是你点击的那个超链接已经发生了改变。