To operate a node, you need to select the node, and you need to know the node selector and DOM node lookup

DOM node selector

The W3C provides convenient methods and attributes for locating nodes

getElementById()

One argument: the ID of the element tag

getElementsByTagName()

One argument: element tag name

getElementsByName()

One argument :name The name of the property

getElementsByClassName()

One argument: A string containing one or more class names

querySelector()

Receives CSS selectors and returns the first element matched, or null

querySelectorAll()

Receives CSS selectors, returns an array, or returns []

DOM node relationships and node lookup

Traversal node tree, the hair method involved

hasChildNodes()

Returns true if one or more nodes are included

contains()

Returns true for descendant nodes

isEqualNode()

Both nodes refer to the same object: the passing node and reference node’s reference to the same object return true

isSameNode()

Refers to whether two nodes are of the same type, have equal Attributes /childNodes, etc

compareDocumentPostion()

Determine the various relationships between nodes

parentNode

The parent node

parentElement

Parent node tag element

childNodes

All child nodes

children

Layer 1 child node

firstChild

The first child is in the form of a Node object

firstElementChild

The first child tag element

lastChild

The last child node

lastElementChild

The last child tag element

previousSibling

Last sibling node

previousElementSibling

Last sibling tag element

nextSibling

Next sibling node

nextElementSibling

Next sibling tag element

childElementCount

Number of first-level child elements (excluding text nodes and comments)

ownerDocument

Document node that points to the entire document

Difference between Node and Element

  • Element is contained in node and its nodeType is 1

  • ParentElement matches when parent is an element and parentNode matches when parent is a node.

  • If the nodeType of the parent node is not 1, that is, it is not an Element node, its parentElement is null

The node diagram is shown below

DOM node style manipulation

DOM node style operation, you can set class, set style

Operating the className

ClassName: returns the node style, you can set className=”demo1 class2″

ClassList: Returns an array of all class names

  • Add (add)

  • Contains (Contains a class, returns true if it exists, false otherwise)

  • Remove (remove)

  • Toggle (remove if it exists, add otherwise)

Manipulating the style method

style.cssText

The code in style can be read and written

style.item()

Returns the name of the CSS property at a given location

style.length

Number of arguments in the style block

style.getPropertyValue()

Returns the string value of the given property

style.getPropertyPriority()

Checks if a given property is set! Important, set to return “important”; Otherwise an empty string is returned

style.removeProperty()

Delete specified attributes

style.setProperty()

To set a property, three parameters can be set: set the property name, set the property value, whether to set to “important”(no write or write “”)

DOM content manipulation

TEXT node TEXT

innerText

All plain text content, including text in child tags

outerText

Similar to the innerText

innerHTML

All child nodes (including element, comment, and text nodes)

outerHTML

Returns its node and all its children

textContent

Similar to innerText, the content returned is styled

data

The text content

length

The length of the text

createTextNode()

Create text

normalize()

Remove the white space between text

splitText()

segmentation

appendData()

additional

deleteData(offset,count)

Deletes count characters from the position specified by offset

insertData(offset,text)

Insert text at the position specified by offset

replaceData(offset,count,text)

Replace, the text from offset to offscount is replaced by text

substringData(offset,count)

Extracts the text from ffset to offscount

InnerText, innerHTML, outerHTML, outerText

  • InnerText: Indicates the text between the start tag and the end tag

  • InnerHTML: The HTML code that represents all the elements and text of an element

  • OuterText: Replaces the entire target node. The outerText returns the same content as the innerText

  • OuterHTML: Replaces the entire target node and returns the complete HTML code of the element, including the element itself

Document node Document

document.documentElement

Represents an element in a page

document.body

Represents an element in a page

document.doctype

On behalf of the label

document.head

Represents an element in a page

document.title

Represents the text of the element, which can be modified

document.URL

The URL of the current page

document.domain

The domain name of the current page

document.charset

The character set used by the current page

document.defaultView

Returns the window object associated with the current Document object, without null

document.anchors

All elements in the document with the name attribute

document.links

All elements in a document with an href attribute

document.forms

All of them in the document

The element

document.images

All of them in the documentThe element

document.readyState

Two values :loading(loading document), complete(loading document)

document.compatMode

Two values: BackCompat: the standard compatibility mode is disabled, and CSS1Compat: the standard compatibility mode is enabled

Write (), writeln (),

The open (), close ()

Write () text is output to the screen as is, writeln() output is followed by a line break,

Open () clears the contents and opens a new document, close() closes the current document, and the next write is a new document

DOM basic operation mind map

Reference article:

ECMAScript, BOM, DOM (core, browser object model and the document object model (DOM) www.cnblogs.com/best/p/8028…

JavaScript learning summary (3) the BOM and the DOM, rounding segmentfault.com/a/119000000…

Javascript BOM and DOM operation explanation (1) blog.csdn.net/openbox2008…

JavaWeb: JavaScript (BOM and DOM) blog.csdn.net/weixin\_423…

The HTML DOM Event object www.w3school.com.cn/jsref/dom_o…

The XML DOM object Element – www.w3school.com.cn/xmldom/dom_…

JAVAScript DOM and variance analysis of BOM www.cnblogs.com/fjner/p/589…

Reprint the home station article talk about BOM and DOM (3) the operating element style changes – and DOM DOM node to add and delete “, please indicate the source: www.zhoulujun.cn/html/webfro…