CH10-原始DOM

节点Node

DOM1 级定义了一个 Node 接口,该接口将由 DOM 中的所有节点类型实现。这个 Node 接口在JavaScript 中是作为 Node 类型实现的;除了 IE 之外,在其他所有浏览器中都可以访问到这个类型。JavaScript 中的所有节点类型都继承自 Node 类型,因此所有节点类型都共享着相同的基本属性和方法。

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

Node节点
每个节点都有一个 nodeType属性,用于表明节点的类型。节点类型由在 Node 类型中定义的下列12 个数值常量来表示,任何节点类型必居其一，为了确保跨浏览器兼容,最好还是将 nodeType 属性与数字值进行比较。（没错IE说的就是你）

//适用于所有浏览器
if (someNode.nodeType == 1){
    alert("Node is an element.");
}
  • Node.ELEMENT_NODE (1); document.createElement("div");
  • Node.ATTRIBUTE_NODE (2);
  • Node.TEXT_NODE (3); document.createTextNode("Hello world!");
  • Node.CDATA_SECTION_NODE (4);
  • Node.ENTITY_REFERENCE_NODE (5);
  • Node.ENTITY_NODE (6);
  • Node.PROCESSING_INSTRUCTION_NODE (7);
  • Node.COMMENT_NODE (8);
  • Node.DOCUMENT_NODE (9);
  • Node.DOCUMENT_TYPE_NODE (10);
  • Node.DOCUMENT_FRAGMENT_NODE (11);
  • Node.NOTATION_NODE (12)。

注意：关系指针都是只读的！ 所以 DOM 提供了一些操作节点的方法
DOM节点

小结

DOM 是语言中立的 API,用于访问和操作 HTML 和 XML 文档。DOM1 级将 HTML 和 XML 文档形象地看作一个层次化的节点树,可以使用 JavaScript 来操作这个节点树,进而改变底层文档的外观和结构。

  • 最基本的节点类型是 Node ,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自Node 。
  • Document 类型表示整个文档,根节点。在 JavaScript 中, document 对象是Document 的一个实例。使用 document 对象,有很多种方式可以查询和取得节点。
  • Element 节点表示文档中的所有 HTML 或 XML 元素,可以用来操作这些元素的内容和特性。
  • 另外还有一些节点类型,分别表示文本内容、注释、文档类型、CDATA 区域和文档片段。

CH11-DOM扩展

Selector API (CSS选择器标准)

  • document.querySelector(); //返回第一个匹配的单个实例
  • document.querySelectorAll(); //返回一个匹配的NodeList实例
  • document.matchesSelector(); //返回true/false。不建议，存在兼容问题

HTML5下新的DOM相关

类相关

  • document.getElementsByClassName();
    //区别于document.querySelector();的地方类名的先后顺序无所谓。取得所有类中包含"username"和"current"的元素
var allCurrentUsernames = document.getElementsByClassName("username current");
  • document.classList
    • add(value) :将给定的字符串值添加到列表中。如果值已经存在,就不添加了。
    • contains(value) :表示列表中是否存在给定的值,如果存在则返回 true ,否则返回 false 。
    • remove(value) :从列表中删除给定的字符串。
    • toggle(value) :存在则删除;不存在则添加。 div.classList.toggle("selected");
  • 焦点管理
    document.activeElement;
    document.hasFocus();
    node.focus();
  • HTMLDocument的变化
    • 状态变化document.readyState
      可能值只有"loading"和"complete"
    • 兼容模式document.compatMode
      在标准模式下, 值等于 "CSS1Compat" ,而在混杂模式下, 值等于 "BackCompat"
  • 字符集(document.charset和document.defaultCharset)
  • 自定义标签Attribute
      <div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
  <script>
      var div = document.getElementById("myDiv");
      var appId = div.dataset.appId;
      var myName = div.dataset.myname;
      div.dataset.appId = 23456;
      div.dataset.myname = "Michael";
  </script>

    专有扩展