11.1 Selector API:
The two core methods of SelectorsAPI are: querySelector() and querySlelctorAll(). In compatible browsers, they can be called through instances of Domcument and Element types.
11.1.1 querySelector() method:
The querySelector() method receives a css selector and returns the first element that matches the selector. If there is no match, it returns null.
Calling the querySelector() method through document will find matching elements within the range of document elements.
Elementquery calls the querySelector() method only to find matching elements in the descendant elements of the element
11.1.2querySelectorAll()
var body=document.querySelector("body");
var p=body.querySelector(".menu_1")
// var li=p.querySelector("li");
var li=p.querySelectorAll("li");
for(var i=0;i<li.length;i++){
var list={};
list[i]=li[i].innerHTML;
alert(list[i]);
}11.1.3matchesSelector
This method receives a parameter, which is the css selector, and returns true if the called method matches the element.
11.2 Element Traversal
Elment Traversal API adds the following 5 attributes to DOM elements.
1: childElementCount: returns the number of child elements
2: firstElementChild: points to the first child element, firstChild element version;
3: lastElementChild: points to the last one Child element, lastChild element version;
4: previousElementSibling: points to the previous sibling element;
5: nextElementSibling: points to the next sibling element;
11.3HTML5
11.3.1 Class-related extensions
1: getElementByClassName() This method receives a parameter, a string of one or more class names, and returns a NodeList with all specified elements.
2: classList attribute: (for class="Operation here")
The classList attribute is an instance of the new collection type DOMTokenList. Similar to other DOM collections. Has the following methods:
add(value): Adds the given string to the list.
contains(value): Indicates whether the given value exists in the list. If so, it will return true. If not, it will return false.
remove(value) Removes the given string from the list
toggle (If the given value exists in the list, delete it, if there is no given value, add it.)
<p id="select" class="aa ss dd ff hh "></p>
<script>
var elem = document.getElementById("select");
var classNum =elem.classList;
console.log(classNum);
</script>At this point, you can use the above method to manipulate the parameters inside.
11.3.2 Focus Management
HTML5 also adds the function of auxiliary management of DOM. The first is the document.activeElement property, which always refers to the currently focused element of the DOM. Gets the element that the current user has focus on.
use. focus() method
11.3.3 Changes in HTMLDocument
1: readyState attribute
This attribute has two values
1; loading, loading Document
2: complete, the document has been loaded.
The most appropriate way to use the document.readyState property is to use it to implement an indicator that the document has been loaded. Indicates that the document has been loaded.
if(document.readyState=="complete"){
//执行操作
}2: Compatibility mode:
Since IE6 began to distinguish whether the mode of rendering the page is standard or mixed, IE added an attribute called compatMode to the document to tell developers The page uses that rendering mode.
There are two return values: CSS1compat, and BackComapat.
corresponds to standard mode and mixed mode respectively.
3: head attribute
If it cannot be used through document.head, use document.getElementByTagName();
11.3.4 Character set attribute
By document .charSet=""; to modify the encoding format of the page;
11.3.6 Insert tag
1: innerHTML attribute
In read mode, the innerHTML attribute returns the calling element's HTML tags corresponding to all child nodes. In write mode, innerHTML will create a new DOM tree based on the specified value.
You can use this attribute to add tags to the specified tag, but not all tags are supported
2: outerHTML attribute
In read mode, outerHTML Returns the HTML tag of the calling element and all its child nodes. In write mode, outerHTML will create a new DOM tree based on the specified HTML characters, and then completely replace the calling element with this DOM subtree.
var val = elem.outerHTML;
Read mode: Return all HTML tags
Write mode: Replace the corresponding DOM elements.
<p id="select" class="aa ss dd ff hh "> <p>this is a test Demo</p> </p>
elem.outerHTML="<p>这是一个测试的demo</p>"
3: insertAdjeacentHTML() method
The last method to insert markup.
Receives two parameters: the insertion position and the HTML text to be inserted. The first element must be one of the following values.
1: beforebegin, insert an adjacent sibling element before the current element.
2: afterbegin, insert a new child element below the current element or insert a new element before the first element
3: beforeend, insert a new element below the current element child element or insert a new element after the last element
4: afterend, add an adjacent sibling element after the element.
4: Memory and performance issues;
Using the method introduced in this section to replace child nodes may cause memory problems in the browser, but using the innerHTML attribute will still bring us a lot of traversal , the reason is that when setting innerHTML or outerHTML, an HTML parser will be created. This parser runs on the basis of browser-level code, so it is much faster than js.
11.3.7scrollIntoView method
Scroll
11.4.1Document mode:
Document mode determines which level of css you can use and which APIs can be used in js:
There are four document modes in total:
IE5: Render the page in mixed mode, The new features in IE8 and higher versions cannot be used
IE7: Render the page in IE7 standards mode, and the new features in IE8 and higher versions cannot be used
IE8: Render the page in IE8 standards Modal rendering, new features in IE8 are all available, so you can use the SelectorsAPI, more CSS2 level selectors and some CSS3 features. There are also some HTML5 features
IE9 - IE9 standards mode rendering page. All new features are available. For example, the function of EMACSript5.
11.4.2 children attribute
There is almost no difference between the children attribute and childNodes. They are both used to return all child nodes.
11.4.3contain (contain) method:
is used to determine whether the node is a descendant node of a certain node. You can directly understand the literal meaning in English, including.
Parent node.contain (a certain node): If true is returned, it is included, otherwise false is returned.
You can also use compareDocumentPosition() to compare file positions, which will return some masks to determine the position relationship
In order to imitate the contain() method, you should pay attention to returning 16;
11.4.4 Insert text:
1: The innerText attribute
will operate on all the values in the element and splice the documents together from shallow to deep. The difference between
and innerHTML is: innerHTML will display all element tags, but innerText will only return the spliced string
When writing, only one text child node will be displayed.
2: outerText attribute
There is basically no big difference between outerText and innerText except that the scope is expanded to include its nodes. The results are exactly the same when reading text, but completely different when writing. outerText will not only replace the child elements of the element that calls it, but will replace the entire element. It is recommended not to use it.
11.4.5 Scroll:
1: scrollIntoviewIfNeeded(alignCenter): Only scroll the browser if the element is not visible in the viewport.
2: scrollByLines(lineCount): Scroll the content of the element to the specified page height. lineCount can be a positive or negative value.
3: scrollBypage(pageCount): Scroll the content of the element to the specified page height. The specific height is determined by the height of the element.
Note: scrollIntoView() and scrollIntoviewIfNeeded(alignCenter) work on the element container, while scrollByLines(lineCount) and scrollBypage(pageCount) work on the element itself.
Chapter 12: DOM2 and DOM3
12.1.1 Changes for XML namespaces
With XML namespaces, elements of different XML documents can be mixed together , don't worry about naming conflicts, technically speaking, HTML does not support XML namespaces, but XHTML supports XML namespaces.
1: Changes in Node type
In DOM2 level, the Node type contains the following namespace-specific attributes.
localName: Node name without namespace prefix.
namespaceURL: The namespace URL is null.
prefix: namespace prefix or null.
2: Changes in document type
The Document type in DOM2 level has also changed, including the following namespace-related methods.
createElementNs(namespaceURI,tagName): Create a new element belonging to the namespace namespaceURI using the given tagName.
createAttributeNS(nameSpaceURI, attributeName) Creates a new attribute belonging to the namespace nameSpaceURI using the given attributeName.
getElementByTagNameNs(namespaceURI, tagName) returns a NodeList of tagName elements belonging to the namespace URI.
3: Changes in Element type
Changes related to Element in "DOM2 level" mainly involve operating characteristics. The new method is as follows.
getAttributeNS(namespaceURI, localName) Gets the attribute of the namespace URI named localName
getAttributeNodeNS(namespaceURI, localName) Gets the attribute node belonging to the namespace URI and named localName
getElementsByTagNameNS(namespaceURI, tagName) returns the nodeList belonging to the namespace namespaceURI
hasAttributeNS(namespaceURI, localName) determines that the current element is an attribute named localNaem, and the namespace of the attribute is namespaceURI
removeAttributeNS (namespaceURI, localName) deletes the attribute that belongs to the namespace URI and is named localName
setAttributeNS (namespaceURI, qualifiedName, value): Sets the attribute value that belongs to the namespace URI and is named qualifiedName to value
setAttributeNodeNS (attNode) sets the attribute node belonging to the namespace namespaceURI
4: Changes in NamedNodeMap type
Since attributes are represented by NamedNodeMap, these methods are only for Feature usage
1: getNamedItemNS(namespaceURI, localName): Get the item that belongs to the namespace namespaceURI and is named localName
2: removeNamedItemNS(namespaceURI, localName): Remove the item that belongs to the namespace namespaceURI and is named localName Item named localName
3: setNamedItemNS(node): Add node, which has namespace information specified in advance.
Since properties are generally accessed through elements, these methods are rarely used.
12.1.2 Other changes
1: Changes in documentType type
Added three attributes: publicID systemId and internalSubset.
2: Changes in document type:
The DOM2 core is still document. The implementation object specifies two new methods: creatDocumentType() and creatDocument()
The former is used to create a new DocumentType node and accepts three parameters: document type, publicID, systemID;
When creating a new document, you need to use the createDocument() method, which also accepts three parameters: namesp-aceURI, tag name of the document element, and new document type
3: Changes in Node type
Just add the isSupported() method: used to determine what capabilities the current node has.
This method receives two parameters, feature name and feature version number.
12.2 Style
There are three ways to define styles in HTML: external , embedded