This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Obtain the DOM in js

1. document.getElementById()

Gets a DOM element object based on its ID

  • Parameter: element ID
  • Return value: The DOM object obtained based on the element ID, or null if not obtained
  • Note:
    1. If ID names are the same: then get the first;
    2. The context of getElementById must be Document
var parent = document.getElementById('parent');
console.log(parent);

Copy the code

2. context.getElementsByTagName()

  • Parameter: label name
  • Return value: dom set of specified tag name obtained from context, not space-time set
  • Note:
    1. The DOM collection is a class array with a length and an index
    2. Context is not specified. When you want to get all the specified tags under an element, that element is the context
var lis = parent.getElementsByTagName('li'); }}}}}}}}}}}}}}}}}}}}}}}}}}}
console.log(lis);
Copy the code

3. context.getElementsByClassName()

In context, the collection of elements is obtained based on the element class name

  • Parameter: element class name
  • Return value: a collection of elements with the specified class, or an empty collection if not obtained
  • Context: The element under which you want to find the element with the class name is the context
var someBox = document.getElementsByClassName('some-box');
console.log(someBox);
var child = parent.getElementsByClassName('child');
console.log(child);
Copy the code

4. document.getElementsByName

The name attribute is used to get the element object, typically a collection of form elements

  • Parameter: element name attribute
  • Return value: a collection of elements with the specified attribute value
var input = document.getElementsByName('inputField');
console.log(input);

Copy the code

5. document.documentElement

Gets the HTML element object

console.log(document.documentElement);

Copy the code

6. document.body

Gets the body element object

console.log(document.body);
Copy the code

Gets the width and height of the browser’s visible window

  • The width of the
var winW = document.documentElement.clientWidth || document.body.clientWidth;
console.log(winW);

Copy the code
  • highly
var winH = document.documentElement.clientHeight || document.body.clientHeight;
console.log(winH);

Copy the code

7. According to the selector (can be used in mobile terminal, there is a compatibility problem in PC)

Context.queryselector gets one context. QuerySelectorAll gets allCopy the code
var single = document.querySelector('.some-box');
console.log(single);

var multi = document.querySelectorAll('.some-box');
console.log(multi);
Copy the code

2. DOM node properties

1. The node:

Everything in HTML becomes a node. Nodes describe the relationship between nodes through node attributes and obtain element objects according to node relationships.

DOM node:

node nodeType nodeName nodeValue
Element nodes 1 Upper case label name null
Text node 3 #text The text content
Comment node 8 #comment The comment
document 9 #document null

Note: Newlines and whitespace are text nodes

var parent = document.getElementById('parent');
var second = document.getElementById('second');
Copy the code

2. Node attributes

2.1 childNodes

Gets all the children of the current element node whose attribute values are collections

console.log(parent.childNodes);

Copy the code

2.2 the children:

Gets all the element child nodes of the current element whose attribute values are collections

 console.log(parent.children);
Copy the code

2.3 fistChild

Gets the first child node of the current element

 console.log(parent.firstChild);
Copy the code

2.4 firstElementChild

Gets the first element child node of the current element

 console.log(parent.firstElementChild);
Copy the code

2.5 lastChild

Gets the last child node of the current element

 console.log(parent.lastChild);
Copy the code

2.6 lastElementChild

Gets the last element child node of the current element

 console.log(parent.lastElementChild);
Copy the code

2.7 parentNode

Gets the parent node of the current element where the attribute value is the object

 console.log(second.parentNode);
Copy the code

2.8 previousSibling

Gets the last sibling node

 console.log(second.previousSibling);
Copy the code

2.9 previousElementSibling

Gets the sibling node of the previous element

 console.log(second.previousElementSibling);
Copy the code

2.10 nextSibling

Gets the next sibling node

 console.log(second.nextSibling);
Copy the code

2.11 nextElementSibling

Gets the next element sibling node

 console.log(second.nextElementSibling);
Copy the code
    1. The node collection or nodes obtained according to the relationship between nodes are ALL DOM collections or DOM element objects. We can manipulate these collections or objects, just like we can manipulate DOM collections or objects.
parent.lastElementChild.firstElementChild.innerHTML = 'I added it through the DOM node property';
parent.lastElementChild.firstElementChild.style.backgroundColor = 'red';
parent.lastElementChild.firstElementChild.onclick = function () {
  alert('This is the event bound by the DOM node property relationship.')};Copy the code

3. Dynamically operate the DOM

Create a DOM element object document.createElement()

  • Grammar: the document. The createElement method ()
  • Parameter: HTML tag name
  • Return value: the newly created DOM object
  • Note: The newly created DOM object behaves no differently than the DOM object we fetched from the page;
var newDiv = document.createElement('div');
newDiv.innerHTML = 'I'm a new div';
newDiv.style.backgroundColor = 'red';
newDiv.style.width = '100px';
newDiv.style.height = '100px';
newDiv.onclick = function () {
  alert('I'm a click on a new div.');
};
Copy the code
  • ? There’s no div on the page, right? Why not? Because we created this dynamically, we didn’t insert this new div into the HTML document.

AppendChild: adds an element to the end of the element container

  • AppendChild (element object);
  • Parameter: element object (either new or existing)
  • Return value: element object inserted into the container
var wrapper = document.getElementById('wrapper');
var obj = wrapper.appendChild(newDiv);
Copy the code

3. Parent container. removeChild()

var originExist = document.getElementById('originExist');
wrapper.removeChild(originExist);
Copy the code

3. InsertBefore inserts an element before an element tag in the specified container

  • Syntax: parent container. InsertBefore (newEle, oldEle);
  • Parameters: the new element to be inserted, the old element already in the container
  • Return value: newEle
var insertResutl = wrapper.insertBefore(newDiv, originExist);
console.log(insertResutl);
Copy the code

4. CloneNode () to clone a node

  • Grammar: curEle cloneNode (false)
  • Parameter: true indicates deep clone, and all descendants of the current node are cloned. False indicates that only the current node is cloned
  • Return value: cloned node ()
var cloneWrapper = wrapper.cloneNode();
console.log(cloneWrapper === wrapper); # # # #falseThe clone has nothing to do with the original nodeCopy the code

4. Property operation

SetAttribute () sets HTML inline attributes for the current element

  • Syntax: element object. setAttribute(attr, value)
  • Parameters: property name, property value
var attributeBox = document.querySelector('#attributeBox');
attributeBox.setAttribute('name'.'Glass outside the River');
attributeBox.setAttribute('age'.'10');
Copy the code

GetAttribute () gets the attribute value of an in-line attribute in the current HTML

  • Syntax: element object. getAttribute(attr)
  • Parameter: property name
  • Return value: property value
var name = attributeBox.getAttribute('name');
console.log(name);
Copy the code

3. RemoveAttribute () deletes the specified attribute

  • Syntax: element object. removeAttribute(attr)
  • Parameter: The property to delete
attributeBox.removeAttribute('age');
Copy the code