高程3总结#第10章DOM

时间  2021-02-16
标签 javascript html java node 数组 app dom 工具 url spa 栏目 HTML 繁體版
原文   原文链接

DOM

节点层次

Node类型

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

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

    • 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对象，是一种数组对象，用于保存一组有序的节点，能够经过位置来访问这些节点。html

    • childNodesjava

      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列表中的第一个和最后一个节点。

      图片描述

  • 操做节点node

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

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

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

      //插入后成为最后一个子节点
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()，替换节点。接收两个参数，要插入的节点和要替换的节点，要替换的节点将由这个方法返回并从文档树中移除，同时由要插入的节点占据其位置dom

      //替换第一个子节点
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对象的一个属性，所以能够将其做为全局对象来访问。url

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

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

    //取得文档标题
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);
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程