DOM1 mainly defines the underlying structure of HTML and XML documents. DOM2 and DOM3 add more interactive capabilities to these structures, providing more advanced XML features.

The evolution of the DOM

The DOM2 and DOM3 modules aim to extend the API to meet all the requirements of XML and provide better error handling and feature detection. DOM2 Core does not add any new types, but adds some method properties. DOM3 Core enhances the original types, but also adds new types.

1.XML namespace

In fact, XML naming is a way to avoid element naming conflicts. To take one

In XML, the names of elements are specified by the developers themselves, and if you were to develop them together, there would be naming conflicts when two different documents used the same element name.

This XML carries information about the HTML table:

<table>
<tr>
<td>Apples</td>
<td>Bananas</td>
</tr>
</table>
Copy the code

This XML document carries information about the table (a piece of furniture) :

<table>
<name>African Coffee Table</name>
<width>80</width>
<length>120</length>
</table>
Copy the code

If these two XML documents are used together, naming conflicts can occur because both documents contain <table> elements with different content and definitions.

The XML parser cannot determine how to handle such conflicts.

The 👆 problem can be solved by prefixing the name

<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
Copy the code

But before a prefix name can be used, a so-called namespace for the prefix must be defined.

The namespace is defined in the XMLNS attribute of the element’s start tag.

The syntax for namespace declarations is as follows. XMLNS: prefix =”URI”.

<root>

<h:table xmlns:h="http://www.w3.org/TR/html4/">
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

<f:table xmlns:f="http://www.w3cschool.cc/furniture">
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>

</root>
Copy the code

In the example above, the XMLNS attribute of the <table> tag defines qualified namespaces for the h: and f: prefixes.

When a namespace is defined in the opening tag of an element, all child elements with the same prefix are associated with the same namespace.

Namespaces, which can be declared in the element they are used or in the XML root element:

<root xmlns:h="http://www.w3.org/TR/html4/"
xmlns:f="http://www.w3cschool.cc/furniture">

<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>

</root>
Copy the code

Note: Namespace URIs are not used by parsers to find information.

The purpose is to give a namespace a unique name. However, many companies often use namespaces as Pointers to an actual web page that contains information about the namespace.

This is especially necessary when a document uses a mix of XML languages, such as XHTML and SVG 👇

In this case, the < SVG > element is identified as foreign to the current document by giving it its own namespace. Even though this is an XHTML document, the SVG code is still valid.

I’ll start with the basics and come back if I run into trouble.

style

Styles are defined in HTML in three ways: external stylesheets (through a element), document stylesheets (using a

Any time you get a reference to a valid DOM element, you can style it via JavaScript 👇

let myDiv = getDocumentById("myDiv");
myDiv.style.backgroundColor = "red";
Copy the code

There are two points to note 👇

CSS float can not be converted directly, because float is JavaScript reserved word, use cssFloat.

②👆 background-color should be changed to backgroundColor, do not support hyphen.

Not only can you manipulate DOM Settings to make changes, but you can also get styles 👇

console.log(myDiv.style.backgroundColor);//red
Copy the code

traverse

The DOM2 Traversal and Range module defines two types to aid sequential Traversal of DOM structures. These two types — NodeIterator and TreeWalker — perform depth-first traversal of the DOM structure from a starting point.

More see 📕 P478

Advanced Programming in JavaScript (4th edition)

Title styles from: juejin.cn/post/684490…

Where write wrong contact me 🐧 : 54269504