This is the 31st day of my participation in Gwen Challenge

1, DOM query

(1) Get the body tag

var body = document.getElementsByTagName('body') [0] indocumentContains an attribute body, which preserves the introduction of the bodyvar body = document.body
// Save the HTML tag
var html = document.documentElement
// All elements of the page
var all = document.all
或者
all = document.getElementsByTagName("*")
Copy the code

(2) Query a group of element node objects based on the class attribute value of the element

var box = document.getElementsByClassName("box")
​
// Get all the divs for the page
var div = document.getElementsByTagName('div')
​
// Get the specified DIVThrough the CSS selectorvar abox = document.querySelector(".box div")
Copy the code

Note: The best compatibility is: querySelector(), but if the query has more than one selector, it only returns the first one. To return more than one, you can use: querySelectorAll().

2. Add, delete, modify and check DOM

(1) Add new child nodes

// Create the Guangzhou li element node with a label name as an argument
var li = document.createElement("li")
// To create a text node, a text content is required as an argument
var text = documentThe createTextNode (" guangzhou ")// Add text nodes to li as child nodes
   li.appendChild(text)
var city = document.getELementById('city')
     city.appendChild(li)
Copy the code

(2) Delete child nodes

// parent node callCity. RemoveChild (nodes)Copy the code

(3) Replace the child node

// Replace the child node, called by the parent node
city.replaceChild('New node'."Old node")
Copy the code

(4) Insert child nodes

// Inserts a new child node before the specified child nodeCity. insertBefore(new node,'Old node')
Copy the code

Note 1: You can not get the parent element, directly:

Parentnode.removechild (child node)

Note 2: You can add operations using innerHTML

obj.innerHTML += Guangzhou "< li > < / li >"
Copy the code

3. JS modifies styles

(1) Inline style

Syntax: element.style.style name = style value

/ / get the box
var box = document.getElementById('box')
// Modify the box style
box.style.width = "300px";
// Change the color,
box.style.backgroundColor = "yellow"
Copy the code

Note: If the CSS style name is also -, you need to change the style name to camel name.

The styles we set through the style property are inline, and the styles we read are inline.

(2) Read the style that the current element is displaying

box.currentStyle.width
box.currentStyle.backgroundColor
Copy the code

Note: currentStyle is only available in IE, other browsers getComputedStyle()

Two arguments are required: first: the element to get the style

Second: you can pass a pseudo-element, usually NULL

The return is an object that encapsulates the style of the current element, which can be read from the object.

getComputedStyle(box1, null).width
Copy the code

Defines a function to get the current style of the specified element

/* * obj: the element to get the style * name: the name of the style to get */
function getStyle(obj, name) {
    // Normal browser
   return getComputedStyle(obj, null)[name]
    // Internet Explorer 8
  /// return obj.currentStyle[name]
}
// Final optimized version
function getStyle(obj, name) {
    if(window.getComputedStyle) {
        return getComputedStyle(obj, null)[name] 
    } else {
        returnObj. CurrentStyle [name]}} orfunction getStyle(obj, name) {
    return window.getComputedStyle ? getComputedStyle(obj, null)[name] : obj.currentStyle[name]
}
Copy the code

Summary: Styles read through currentStyle and getComputedStyle() are read-only attributes and cannot be modified. If you do, you must use the Style attribute

4. Other styles

(1) clientWidth/clientHeight

These two attributes get the visible width and height of the element, including the content area and inner border. No PX, and are read-only properties, cannot be modifiedCopy the code

(2) the offsetWidth/offsetHeight

You can get the entire width and height of an element, including the content area, inner border, and borderCopy the code

(3) the offsetParent

The location parent that can be used to get the current element will get the nearest location enabled ancestor element to the current element.Copy the code

(4) offsetLeft

The horizontal offset of the current element relative to its positioned parentCopy the code

(5) the offsetTop

The vertical offset of the current element to its positioned parentCopy the code

(6) scrollWidth/scrollHeight

Get the width and height of the scroll areaCopy the code