w3c标准 – Dom

2022-09-29 11:00:35 浏览数 (4)

大家好，又见面了，我是你们的朋友全栈君。

w3c标准 – Dom

1. DOM

（1） DOM : W3C的标准,定义了访问HTML和XML文档的标准。

（2） 分类

a. 核心 DOM – 针对任何结构化文档的标准模型.

b. XML DOM – 针对 XML 文档的标准模型 (XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法)

c. HTML DOM – 针对 HTML 文档的标准模型

（3）HTML DOM

HTML DOM 是:

HTML 的标准对象模型

HTML 的标准编程接口

W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

2. HTML DOM

（1） DOM节点： HTML文档中的所有内容都是节点

a. 整个文档是一个文档节点

b. 每个HTML元素是元素节点

c. HTML元素内的文本是文本节点

d. 每个HTML属性是属性节点

e. 注释是注释节点

（2） 节点父（parent），子（child）和同胞（sibling）

a. 在节点树中，顶端节点被称为根（root）

b. 每个节点都有父节点、除了根（它没有父节点）

c. 一个节点可拥有任意数量的子

d. 同胞是拥有相同父节点的节点

（3）方法： 开发人员可以在节点上执行的操作

下面是一些方法的实际调用,具体的调用参数大家可以查看为w3c.

代码语言：javascript复制
div id="test_dom">


</div>

<script type="text/javascript">
    var testDomDiv = document.getElementById("test_dom");

    //CreateElement.
    var newdivElement = document.createElement('div');
    testDomDiv.appendChild(newdivElement);

    //CreateAttribute.
    var newAttribute = document.createAttribute('class');
    newAttribute.value = 'footer';
    newdivElement.setAttributeNode(newAttribute);

    newdivElement.setAttribute('data', '123');

    //CretateComment.
    var createComment = document.createComment("This the comment for create comment!");
    testDomDiv.appendChild(createComment);

    //InsertBefore.
    var createCommentInsertBefore = document.createComment("This is the comment for insert before");
    testDomDiv.insertBefore(createCommentInsertBefore, createComment);

    //replaceChild.
    var replaceChild = document.createComment("This is used to test the replace child");
    testDomDiv.replaceChild(replaceChild, createCommentInsertBefore);

    //createtTextNode.
    var createTextNode = document.createTextNode("This the test for testing");
    testDomDiv.appendChild(createTextNode);
代码语言：javascript复制
</script>

下面是上面代码执行之后的结果

(4) 属性

代码语言：javascript复制
    //innerhtml 属性对于获取或替换 HTML 元素的内容很有用。    //Note: 这个属性适用于元素节点，对于属性，注释，文本，文档节点返回的结果都是undefined    console.debug("InnerHtml");    console.log("Element InnerHtml  : "   testDomDiv.innerHTML);    console.log("Attribute InnerHtml: "   newAttribute.innerHTML);        console.log("Comment InnerHtml  : "   createComment.innerHTML);    console.log("Text InnerHtml     : "   createTextNode.innerHTML);    console.log("Document InnerHtml : "   document.innerHTML);    console.log();    //nodeName ：节点的名称，只读的。    //Note: （1）元素节点的NodeName 与标签名相同。    //Note: （2）属性节点的NodeName 与属性名相同。    //Note: （3）注释节点的NodeName 始终是 #comment。    //Note: （4）文本节点的NodeName 始终是 #text。    //Note: （5）文档节点的NodeName 始终是 #document。    console.debug("NodeName");    console.log("Element NodeName   : "   testDomDiv.nodeName);    console.log("Attribute NodeName : "   newAttribute.nodeName);    console.log("Comment NodeName   : "   createComment.nodeName);    console.log("Text NodeName      : "   createTextNode.nodeName);    console.log("Document NodeName  : "   document.nodeName);    console.log();    //nodeType ： 节点的类型，只读的。    //Note: （1）元素节点的NodeType 1    //Note: （2）属性节点的NodeType 2    //Note: （3）注释节点的NodeType 8    //Note: （1）文本节点的NodeType 9    //Note: （1）文档节点的NodeType 3    console.debug("NodeType");    console.log("Element NodeType   : "   testDomDiv.nodeType);    console.log("Attribute NodeType : "   newAttribute.nodeType);    console.log("Comment NodeType   : "   createComment.nodeType);    console.log("Text NodeType      : "   createTextNode.nodeType);    console.log("Document NodeType  : "   document.nodeType);    console.log();    //nodeValue ： 节点的值。    //Note: （1）元素节点的NodeValue null    //Note: （2）属性节点的NodeValue 是属性值    //Note: （3）注释节点的NodeValue 是注释的内容    //Note: （1）文本节点的NodeValue 是文本本身    //Note: （1）文档节点的NodeValue null    console.debug("NodeValue");    console.log("Element NodeValue  : "   testDomDiv.nodeValue);    console.log("Attribute NodeValue: "  newAttribute.nodeValue);    console.log("Comment NodeValue  : "   createComment.nodeValue);    console.log("Text NodeValue     : "   createTextNode.nodeValue);    console.log("Document NodeValue : "   document.nodeValue);

看一下浏览器上的输出结果

Summary: 针对node的属性除了InnerHtml日常之间可能用到的多，其他的三个用到的其实不多，但是这几个属性确实会在一些框架的源码中出现，因为框架越方便，就证明其中必然框架本身会做许多的事情，例如knockout，angular里面有很多的data-bind，这个其实会在整个dom渲染之后js会去遍历节点，然后通过节点的这几个属性去区分节点的不同。

（5） HTML DOM的修改

(1)改变 HTML 内容 (2)改变 CSS 样式 (3)改变 HTML 属性 (4)创建新的 HTML 元素 (5)删除已有的 HTML 元素 (6)改变事件（处理程序）

（6）. HTML DOM事件：　html dom 允许Javascript对html事件做出反应。

a. 当事件发生时，可以执行javascript。 onclick = Javascript javascript代码直接写在事件处理程序中，或者从事件处理程序中调用函数 b. 事件属性： 如需想HTML元素分配事件，可以使用事件属性，在html标签中属性用于事件处理的就是事件属性。 c. HTML DOM允许使用Javascript向HTML元素分配事件。

（7）. HTML DOM导航

a. 节点属性parentNode、firstChild 以及 lastChild b. DOM根节点

document.documentElement – 全部文档 <html><body></body></html> document.body – 文档的主体 <body></body> #document – 带有 !DOCTYPE 标签 <!DOCTYPE html><html><body></body></html>

c. 使用 childNodes 和 nodeValue 属性来获取元素的内容

//id 为intro的元素为一个p标签 var txt=document.getElementById(“intro”).childNodes[0].nodeValue;

3. Summary

对于Html DOM这个东西，看完了整个w3c上的教程之后，自己也思考了一下，我自己的认识如下：

DOM 是 Document Object Model（文档对象模型）的缩写，从字面意思可以看出这其实就像是将一个事物抽象出来的对象，以这个对象来代表这个事物，就像以html dom来代表html。通过对象的方法来实现我们想要的结果或者拿到我们需要的信息。我们可以通过html dom的操作去获得html上的信息，去添加，删除，修改其中的节点（节点上的属性）。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/193054.html原文链接：https://javaforall.cn

html xml java javascript node.js

0 人点赞