JS Review-dom scripted documents

Dom scripted document

First, select document elements

(1) with the specified ID attribute

var section1 = Document.getelementsbyid (' Section1 ');

Note: In browsers less than IE8, getElementById () is not case-sensitive to the ID of the matching element, and also returns the element that matches the name .

(2) with the specified Name property

Definition: The name attribute only has a few HTML elements, including forms, form elements, <iFrame> and elements

var radiobuttons = document.getelementsbyname ("form_1");

Note: Setting the Name property value for some HTML elements is automatically converted to the property created in the Window object, similar to the Document object.

<form name = "Form_1" > var form_1 = document.form_1;

(3) Get elements by tag name

  var lis = document.getelementsbytagname ("Li");

Attention:

The elements class also defines the getElementsByTagName () method, which works the same way as the documents version, but only selects the descendant elements that call the method

  <ul id= "Ul_1" >        <li></li>        <li></li>        <li></li>    </ul >var ul = document.getElementById ("Ul_1"); var lis = ul.getelementsbytagname ("Li");

(4) Selecting elements through CSS classes

Attention:

The elements class also defines the Getelementsbyclassname () method, which works the same way as the documents version, but only selects the descendant elements that call the method

  Find all descendants of the element named "Log" with the "error" and "fatal" classes as var log = document.getElementById ("log"); var fatal = Log.getelementsbyclassname ("Error fatal");

(5) Selecting elements Queryselectorall () method and Queryselector () method via CSS Selector

Queryselector () method : Receives a CSS selector, returns the first element that matches the pattern, and returns null if no matching element is found.

A is called in the document type

Get BODY element var body = Document.quetyselector ("Body");

B, called in element type

Finds a matching element within the bounds of the descendant element of the element

Queryselectorall () method : Receives a CSS selector, but returns everything that matches the element rather than just an element. This method returns an instance of a nodelist

Invocation type: Document, DocumentFragment, and element

Example:

Get all <strong> element var strongs = document in all <p> elements. Queryselectorall ("P Strong");

Matchesselector () method

Definition: This method receives a parameter that returns true if the calling element matches the selector, otherwise false.

if (Document.body.matchesSelector ("Body.page1")) {  //true}

II. Document structure and traversal

1. Type of node

(1) Node access properties

NodeType: Indicates the node type

NodeName: node Name

NodeValue: Node value

(2) Relationship properties of a node

Child nodes:

ChildNodes Property

FirstChild Property

LastChild Property

Parent node:

ParentNode

Sibling node:

PreviousSibling Property

NextSibling Property

Iii. ways to set and get properties

1. Get the attributes of an element object

(1) getattribute ()

(2) The Attributes property, which represents all the attributes of an element. can be accessed with a numeric index or indexed with a property name

Document.body.attributes[0];d ocument.body.attributes["onload"];d Ocuemnt.body.bgcolor

2, SetAttribute ()

3, Hasattribute ()

4. Remove Attribute ()

Note: DataSet properties

In the HTML5 document, any lowercase property name prefixed with "data-" is legal, and HTML5 also defines the DataSet property on the Element object, which refers to an object whose property pair should be stripped of the prefix data-attribute. such as Dataset.x should save the value of Data-x. Properties of the hyphen to be applied to the property name of the Hump nomenclature: The Data-jquery-test property should become the Dataset.jquerytest property

Iii. content of ELEMENT nodes

1, InnerHTML

2, Textcontent

3, Innettext

Iv. creating, inserting, and deleting nodes

1. Create

(1) The createelement () method can create an element node.

Document.createelement (' P '); Create a node of an element

(2) The createTextNode () method creates a text node.

var text = document.createTextNode (' paragraph '); Create a text node p.appendchild (text); Add a text node to the end of a child node

(3) The CloneNode () method can be copied out of the node.

var box = document.getElementById (' box '); var clone = Box.firstChild.cloneNode (true); Gets the first child node, which is true for copy content Box.appendchild (clone); Add to end of child node list

2. Insert

(1) The AppendChild () method tells you that a new node is added to the end of a node's child nodes list.

var Box=document.getelementbyid (' box '); Gets an element node var p=document.createelement (' P '); Create a new element node <p>box.appendchild (p); Put new element node <p> add end of child node

(2) The InsertBefore () method can create a node before the specified node.

Box.parentNode.insertBefore (p, Box)

3. Replacement and deletion

(1) Repalcechild () method

The ReplaceChild () method can replace a node with a specified node.

Box.parentNode.replaceChild (P,box); Replace <div> with <p>

(2) RemoveChild () method

The RemoveChild () method can

Box.parentNode.removeChild (box); Delete the specified node

V. Style of manipulation

1. Operating elements

(1) inline style, Operation style property, readable writable, style property only get CSS style in line, for the other two forms inline <style> and link <link> way can not get to

Example:

var box = document.getElementById (' box '); Get boxbox.style.cssFloat.style.fontSize;

(2), inline, inline and linked getcomputedstyle or currentstyle readable and non-writable

The getComputedStyle () method is provided under the Window object. Accepts two parameters, a style element that needs to be computed, a second pseudo-class (: hover), and null if there is no pseudo-class. Ps:ie does not support this DOM2-level approach, but there is a similar property that can use the Currentstyle property.

Varbox=document.getelementbyid (' box '); Varstyle=window.getcomputedstyle?window.getcomputedstyle (box,null): null| | Box.currentstyle

(3), inline and linked cssrules or rules, readable and writable

var sheet = document.stylesheets[0];  Cssstylesheetvar  rules = sheet.cssrules| | sheet.rules;//cssrulelist, List of rule collections for style sheets varrule = rules[0];// Cssstylerule, style sheet first rule

2. Scripted CSS Classes

Because class is a reserved word in JavaScript, the HTML attribute class should use classname in JavaScript. You can specify 0 or a class name in classname, and if you have more than one class name, you will not be able to work.

E.classname = "attention";

E.classname = "Null";

HTML5 solves this problem by defining the Classlist attribute for each element: A read-only class array object. Defines the Add () and remove () methods (adding and removing a class name). Toggle () means that if no class name exists, add one, or delete it. The contains () method detects whether the class attribute contains a specified name for the classes.

Vi. Proprietary Extensions

1. Document mode

Starting from IE6, the standard mode and promiscuous mode (quirks mode) are differentiated, primarily in terms of document declarations. IE adds a property named Compatmode to the Document object, which recognizes that the IE browser's documents are in

What mode, if it is Standard mode, returns CSS1COMPAT, or Backcompat if promiscuous mode.

if (Document.compatmode = = ' Css1compat ') {alert (document.documentElement.clientWidth);} else {alert ( Document.body.clientWidth);}

2. Children Properties

IE and other browsers interpret inconsistencies because of child-node whitespace issues. Although it can be filtered out, you can use the Children property if you just want to get a valid child node

var box = document.getElementById (' box '); alert (box.children.length); Get the number of active child nodes

3. Contains () method

If a node is not a descendant of another node, we can use the contains () method. This method is the first use of IE, developers do not need to traverse to get this information.

var box = document.getElementById (' box '); Alert (Box.contains (Box.firstchild)); True

4. Scrolling

document.getElementById (' box '). scrollIntoView (); Sets the specified visible

JS Review-dom scripted documents