高程3总结#第10章DOM

头像
神膘护体小月半
    阅读 8 分钟

    DOM

    节点层次

    Node类型

    • DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现

    • 节点类型由在Node类型中定义的12个数值常量来表示，任何节点类型必居其一

      • Node.ELEMENT_NODE();
      • Node.ATTRIBUTE_NODE();
      • Node.TEXT_NODE();
      • Node.CDATA_SECTION_NODE();
      • Node.ENTITY_REFERENCE_NODE();
      • Node.ENTITY_NODE();
      • Node.PROCESSING_INSTRUCTION_NODE();
      • Node.COMMENT_NODE();
      • Node.DOCUMENT_NODE();
      • Node.DOCUMENT_TYPE_NODE();
      • Node.DOCUMENT_FRAGMENT_NODE();
      • Node.NOTATION_NODE();
    • 使用nodeName和nodeValue检测节点类型

    • 节点关系，保存NodeList对象，是一种数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。

      • childNodes

        var firstChild=someNode.childNodes();
var secondChild=someNode.childNodes.item();
var count=someNode.childNodes.length();
      • parentNode，每个节点都有parentNode属性，属性指向文档树的节点，包含在childNodes列表中的所有节点都具有相同的父节点，因此它们的parentNode属性都指向同一个节点。此外包含在childNodes列表中的每个节点相互之间都是同胞节点。
      • 通过使用列表中每个节点的previousSibling和nextSibling属性可以访问同一列表中的其他节点。列表中第一个节点的previousSibling属性值为null，而列表中最后一个节点nextSibling属性的值同样也为null
      • 父节点的firstChild和lastChild属性分别指向childNodes列表中的第一个和最后一个节点。

        图片描述

    • 操作节点

      • appendChild()，向childNodes列表的末尾添加一个节点。添加节点之后，childNodes的新曾节点、父节点以及以前的最后一个子节点的关系都会相应地得到更新

        //someNode 有多个子节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true

      • insertBefore()，把节点放在childNodes列表中某个特定的位置上。接收两个参数，要插入的点和作为参照的节点

        //插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); //true
//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true
//插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true

      • replaceChild()，替换节点。接收两个参数，要插入的节点和要替换的节点，要替换的节点将由这个方法返回并从文档树中移除，同时由要插入的节点占据其位置

        //替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
//替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

      • removeChild()，移除节点，接收一个参数，即要移除的节点。

        //移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
//移除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);
      • cloneNode()，接收一个布尔值参数，表示是否执行深复制，在参数为true的情况下，执行深复制，也就是复制节点及其整个子节点树，在参数为false的情况下，执行浅复制，即只复制节点本身。

    Document类型

    • document对象是HTMLDocument的一个实例，表示整个HTML页面，而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。

      • nodeType值为9
      • nodeName值为"#document"
      • nodeValue值为null
      • parentNode值为null
      • ownerDocument值为null

    • document对象有一些标准的Document对象所没有的属性，这些属性提供了document对象所表现的网页的一些信息

      //取得文档标题
var originalTitle = document.title;
//设置文档标题
document.title = "New page title";
//取得完整的 URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得来源页面的 URL
var referrer = document.referrer;
    • 查找元素，getElementById()、getElementByTagName()和getElementByName()

    • 特殊集合

      • document.anchors，包含文档中所有带name特性的<a>元素
      • document.applets，包含文档中所有的<applet>元素，因为不再推荐使用<applet>元素，所以这个集合不再使用
      • document.forms，包含文档中所有的<form>元素
      • document.images，包含文档中所有的<img>元素
      • document.links，包含文档中所有带href特性的<a>元素

    • 文档写入功能，write()、writeln()、open()和close()

      <html>
  <head>
    <title>document.write() Example</title>
  </head>
  <body>
    <p>The current date and time is:
      <script type="text/javascript">
        document.write("<strong>" + (new Date()).toString() + "</strong>");
      </script>
    </p>
  </body>
</html>

    Element类型

    • 用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问

      • nodeType值为1
      • nodeName值为元素的标签名
      • nodeValue值为null
      • parentNode可能是Document或Element

    • HTML元素存在一些标准特性

      • id，元素在文档中唯一的标识符
      • title，有关元素的附加说明信息，一般通过工具提示条显示出来
      • lang，元素内容的语言代码，很少使用
      • dir，语言的方向
      • className，与元素的class特性对应

    • 取得特性，设置属性，移除属性。getAttribute()、setAttribute()和removeAttribute()

      var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd"
alert(div.getAttribute("title")); //"Body text"
alert(div.getAttribute("lang")); //"en"
alert(div.getAttribute("dir")); //"ltr"

div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.setAttribute("lang","fr");
div.setAttribute("dir", "rtl");

div.removeAttribute("class");

    • attribute属性

      var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;
element.attributes["id"].nodeValue = "someOtherId";
var oldAttr = element.attributes.removeNamedItem("id");
element.attributes.setNamedItem(newAttr);
    • 创建元素，createElement()，标签名在HTML文档中不区分大小写，在XML文档中，区分大小写。

    Text类型

    • 包含的是照字面解释的纯文本的内容

      • nodeType值为3
      • nodeName值为"#text"
      • nodeValue值为节点所包含的文本
      • parentNode是一个Element
      • 不支持子节点

    • 操作方法

      • appendData(text)将text添加到节点的末尾
      • deleteData(offset,count)从offset指定的位置开始删除count个字符
      • insertData(offset,text)从offset指定的位置插入text
      • replaceData(offset,count,text)用text替换从offset指定的位置开始到offset+count为止处的文本
      • splitText(offset)从offset指定的位置将当前文本节点分成两个文本节点
      • substringData(offset,count)提取从offset指定的位置开始到offset+count为止处的字符串

    • 创建文本节点document.createTextNode()

      var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);

    • 规范化文本节点normalize()

      var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
alert(element.childNodes.length); //2
element.normalize();
alert(element.childNodes.length); //1
alert(element.firstChild.nodeValue); // "Hello world!Yippee!"

    • 分割文本节点splitText()

      var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue); //"Hello"
alert(newNode.nodeValue); //" world!"
alert(element.childNodes.length); //2

    Comment类型

    • 注释在DOM中通过Comment类型来表示

      • nodeType值为8
      • nodeName值为"#comment"
      • nodeValue值是注释的内容
      • parentNode可能是Document或Element
      • 不支持子节点
    • COmment类型与Text类型继承自相同的基类，因此它拥有splitText()之外的所有字符串操作方法。与Text类型相似，也可以通过nodeValue或data属性类取得注释的内容。

    • 使用document.createCommet()并为其传递注释文本也可以创建注释节点

      var comment=document.createComment("A comment")

    CDATASection类型

    • 与Comment类似，继承自Text类型，拥有除splitText()之外的所有字符串操作方法

      • nodeType值为4
      • nodeName值为"#cdata-section"
      • nodeValue值为CDATA区域中的内容
      • parentNode可能是Document或Element

    DocumentType类型

    • 包含着与文档的doctype有关的所有信息

      • nodeType值为10
      • nodeName值为doctype的名称
      • nodeValue值为null
      • parentNode是Document
      • 不支持子节点

    DocumentFragment类型

    • 轻量级文档，可以包含和控制节点，不会像完整的文档那样占用额外的资源

      • nodeType值为11
      • nodeName值为"#document-fragement"
      • nodeValue值为null
      • parentNode值为null

    Attr类型

    • 特性是存在于元素的attribute属性中的节点

      • nodeType值为2
      • nodeName值是特性的名称
      • nodeValue值为特性的值
      • parentNode值为null
      • 在HTML中不支持子节点
      • 在XML中子节点可以是Text或EntityReference

    DOM操作技术

    动态脚本

    • 页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本。两种方式创建：插入外部文件和直接插入JavaScript代码

    动态样式

    • 能够把CSS样式包含到HTML页面中的元素有两个，其中<ling>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式

    操作表格

    • 属性和方法

      • caption ：保存着对 <caption> 元素（如果有）的指针。
      • tBodies ：是一个 <tbody> 元素的 HTMLCollection 。
      • tFoot ：保存着对 <tfoot> 元素（如果有）的指针。
      • tHead ：保存着对 <thead> 元素（如果有）的指针。
      • rows ：是一个表格中所有行的 HTMLCollection 。
      • createTHead() ：创建 <thead> 元素，将其放到表格中，返回引用。
      • createTFoot() ：创建 <tfoot> 元素，将其放到表格中，返回引用。
      • createCaption() ：创建 <caption> 元素，将其放到表格中，返回引用。
      • deleteTHead() ：删除 <thead> 元素。
      • deleteTFoot() ：删除 <tfoot> 元素。
      • deleteCaption() ：删除 <caption> 元素。
      • deleteRow(pos) ：删除指定位置的行。
      • insertRow(pos) ：向 rows 集合中的指定位置插入一行。
        为 <tbody> 元素添加的属性和方法如下。
      • rows ：保存着 <tbody> 元素中行的 HTMLCollection 。
      • deleteRow(pos) ：删除指定位置的行。
      • insertRow(pos) ：向 rows 集合中的指定位置插入一行，返回对新插入行的引用。
        为 <tr> 元素添加的属性和方法如下。
      //创建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//创建 tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
// 创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
// 创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
//将表格添加到文档主体中
document.body.appendChild(table);
    javascript
    神膘护体小月半
    406 声望6 粉丝
    « 上一篇
    高程3总结#第9章客户端检测
    下一篇 »
    高程3总结#第11章DOM扩展

    引用和评论

    推荐阅读
    头像
    对象数组按照非升序或降序的既定顺序排序

    神膘护体小月半阅读 150

    头像
    100个React最佳实践小技巧

    夕水赞 28阅读 7.3k评论 3

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.5k评论 9

    头像
    前端开发工具

    寒青赞 19阅读 5.4k

    头像
    开发插件集合

    寒青赞 14阅读 3.6k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.6k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.9k评论 3

    0 条评论
    得票最新