Access to elements

Get the element in the input box

<input type="text" name="" id=""><button> <select name="" ID ="">< option value="1">1</option> <option value="2">2</option> </select>Copy the code

 var btn = document.querySelector("button");
 var inp = document.querySelector("input");
 var selEle = document.querySelector("select");
 btn.onclick = function(){
            console.log(inp.value);  // Is the value in the input box
            console.log(selEle.value);// This is the option card
        }
Copy the code

DOM element acquisition

DOM operation:

• 1. Add: The document is added
• Second, delete
• 3. Modification: 1. Modify style 2
• 5. Bind events

1. Dom acquisition

// 1. Obtain the value by id
        var ele = document.getElementById("myid"); // Get an element
// 2. Get by class name
        var ele = document.getElementsByClassName(".box"); // Get a pseudo-array
// 3. Obtain the value by label name
        var eles = document.getElementsByTagName("div"); // Get all divs, also a pseudo-array;
// 4. It can be obtained by CSS selector
        var ele = document.querySelector(".box");  // Only one element can be retrieved, or even if there are multiple elements, only the first element can be retrieved
        console.log(ele);
        
        var eles = document.querySelectorAll(".box"); // Get all the elements that meet the criteria and put them in a pseudo-array
        console.log(eles);

Copy the code

2. Simple DOM manipulation

Step 2:1. Obtain the element. 2

1InnerHTML) :1.Replaces the contents of the retrieved elements (parsing HTML);2.Gets the HTML in the element.2) the innerText:1.Replaces the text in the retrieved element (cannot parse HTML).2.Gets the text in the element3Style:1.You can set the style to get2.Note: a. Style is not supported - (background-color is required to change to backgroundColor) B. You can only manipulate inter-line styles without inter-line styles you can't get them4ClassName: the name of the class used to manipulate elements:1.Replace the old class name2.Note that className overrides the previous className when it is setvar btn =  document.querySelector(".btn");
 var divEle = document.querySelector("div");
 btn.onclick = function(){
 divEle.className = "box";  // Add the div class name "box" when clicking BTN
 divEle.className += " box1";// add "box1" class name to div when clicking BTN
}

Copy the code

Action attribute

 <div class="active" myattr="123">111</div>
Copy the code

var divEle = document.querySelector(".active");

GetAttribute (element. GetAttribute (" attribute name "));
var attValue =  divEle.getAttribute("class");
console.log(attValue)//active

SetAttribute (" Attribute name "," attribute value ");
document.querySelector("button").onclick = function(){
divEle.setAttribute("addAttr"."456");// Add the inline attribute addAttr and attribute 456 to div
        }
        
 RemoveAttribute (" attribute name "); The property value is naturally deleted
document.querySelector("button").onclick = function () {
divEle.removeAttribute("myattr");
}
Copy the code

Add createElement

• CreateElement = document.createElement(” tag name “);

• 2. Add the element to the specified DOM. AppendChild (element to be added); AppendChild :1. Does not overwrite previous content. 2.

• Syntax: parent element. InserBefore (” element to be added “,” before which “);

<div class="box">
 <div>555</div>
 <div class="four">444</div>
</div>
Copy the code

var boxEle = document.querySelector(".box");
var fourEle = document.querySelector(".four");
var pEle = document.createElement("p");
pEle.innerHTML = "123";
boxEle.insertBefore(pEle,fourEle); // Add a pEle before fourEle in the boxEle parent element
Copy the code

Remove removeChild or removeChild

• RemoveChild (” child “) : removes the specified child element from the parent element.

var btn = document.querySelector(".btn");
var boxEle = document.querySelector(".box");
var fourEle = document.querySelector(".four");
btn.onclick = function(){
boxEle.removeChild(fourEle);  // Delete the fourEle child from the boxEle parent
}
Copy the code

• 2. Remove can remove the current element directly. Syntax: current element. Remove ();

var btn = document.querySelector(".btn");
var fourEle = document.querySelector(".four");
btn.onclick = function(){
    fourEle.remove(); // Delete the fourEle element without looking for its parent
}
Copy the code

Modify the related replaceChild

• ReplaceChild (new element to be replaced, old element to be replaced)

Copy the element cloneNode

• Syntax: New element = element. CloneNode ();