Javascript Basics: Common Dom basics

1. Document element selection

1.1. ID selector

Selecting an element by ID is the simplest and most common method of selecting an element, and ID selectors perform better than other selectors

var title = document.getElementById("title");
Copy the code

If the ID does not exist, null is returned

1.2. Name selector

Selection elements based on the value of the name attribute are distinguished from ID selectors.

The value of the name attribute does not have to be unique. Multiple elements can have the same name. Second, the name attribute is only valid for a few HTML elements, including forms, form elements, iframe, and IMG elements

var sports = document.getElementsByName("sports");
Copy the code

If the ID does not exist, null is returned

1.3. Label selector

Selects an element of the specified type using the tag name of the HTML element

var h1 = document.getElementsByTagName("h1");
Copy the code

1.4. Class selector

Select elements using the value of the HTML class attribute

var title = document.getElementsByClassName("title");
Copy the code

1.5. CSS single element selector

Select elements using the powerful syntax of the CSS style sheet selector. Returns the first matched element

var title = document.querySelector("#title"); // CSS ID select var h1 = document.querySelector("h1"); // Select the first h1 elementCopy the code

1.6. CSS Multi-element selector

Select elements using the powerful syntax of the CSS style sheet selector. Return an array of elements

var h1s = document.querySelectorAll("h1"); // Return all h1 tag elementsCopy the code

Dom traversal

2.1 Node Correlation

2.1.1 parentNode -parentNode

Returns the parent node, or null if called by the Document object

 var title = document.querySelector("#title");
 title.parentNode.style.color = "red";
Copy the code

2.1.2 childNodes -childNodes

Returns all child nodes, which are NodeList objects

  var parent = document.querySelector("#parent");
  var children = parent.childNodes;
  for(var i =0; i< children.length; i++) {
  	console.log(i+"="+children[i].nodeName);
  }
  console.log(children.length);
Copy the code

2.1.3 firstChild node -firstChild

Returns the first child node

  var parent = document.querySelector("#parent");
  var first = parent.firstChild;
  first.style.color = "red";
Copy the code

2.1.4 First child -lastChild

Returns the last child node

  var parent = document.querySelector("#parent");
  var last = parent.lastChild;
  last.style.color = "red";
Copy the code

2.1.5 nextSibling -nextSibling

Returns the next sibling node

 var title = document.querySelector("#title");
  var next = title.nextSibling;
  next.style.color = "red";
Copy the code

2.1.6 Former Sibling -previousSibling

Returns the previous sibling node

  var title = document.querySelector("#title");
  var pre = title.previousSibling;
  pre.style.color = "red";
Copy the code

2.1.7 nodeType -nodeType

Returns a numerical representation of the node type

1- represents Element node 3- Represents Text node 8- represents Comment node 9- represents Document node 11- represents DocumentFragment nodeCopy the code

2.1.8 nodeValue -nodevalue

Returns the value of the Text node or Comment node

  var title = document.querySelector("#title");
  console.log(title.firstChild.nodeValue);
Copy the code

2.1.9 nodeName -nodename

Returns the label name of the element, in uppercase

  var title = document.querySelector("#title");
  console.log(title.nodeName);
  console.log(title.firstChild.nodeName);
Copy the code

2.2 Element Correlation

2.2.1 Sub-element -children

Returns all child elements

  var parent = document.querySelector("#parent");
  var children = parent.children;
  for(var i =0 ; i < children.length; i++) { children[i].style.color ="red";
  }
  console.log(children.length);
Copy the code

2.2.2 First child Element -firstElementChild

Returns the first of all child elements (a node is a type of element)

  var parent = document.querySelector("#parent");
  var first = parent.firstElementChild;
  first.style.color = "red";
Copy the code

2.2.3 Trailing Element -lastElementChild

Returns the last of all child elements

  var parent = document.querySelector("#parent");
  var last = parent.lastElementChild;
  last.style.color = "red";
Copy the code

2.2.4 Next sibling, nextElementSibling

Returns the next sibling element

  var title = document.querySelector("#title");
  var next = title.nextElementSibling;
  next.style.color = "red";
Copy the code

2.2.5 The next sibling previousElementSibling

Returns the previous sibling element

  var title = document.querySelector("#title");
  var previous = title.previousElementSibling;
  previous.style.color = "red";
Copy the code

2.2.6 Number of child elements

Returns the number of child elements

  var parent = document.querySelector("#parent");
  console.log(parent.childElementCount);
Copy the code

Three, attributes,

3.1 Standard Attributes

The HTMLElement object that represents the elements of an HTML document defines read/write attributes that correspond to the HTML attributes of the element. HTMLElement defines generic HTML attributes, including ID, lang, DIR, event handler onclick, and form-related attributes.

<! DOCTYPE HTML> <html> <head> <meta charset="utf-8"</title> <script SRC ="http://res.30ke.cn/res/js/console.js"></script>
</head>
<body>
  <form id="myform">
    <input type="text" value="Mao Rui" />  
  </form>
  <div id="main"></div>
<script>
  var form = document.querySelector("#myform");
  form.action = "http://30ke.cn";
  form.method = "post";
  console.log(form.id);
  console.log(form.action);
  console.log(form.method);
</script>
</body>
</html>
Copy the code

3.2 Non-standard attributes

3.2.1 Obtaining the Attribute Value – getAttribute

Returns the value of a nonstandard HTML attribute

<body>
  <img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  console.log(img.getAttribute("width"));
</script>
</body>
Copy the code

3.2.2 Setting an Attribute Value -setattribute

Sets the value of a nonstandard HTML attribute

<body>
  <img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  img.setAttribute("width"."400px");
  console.log(img.getAttribute("width"));
</script>
</body>
Copy the code

3.2.3 Checking the existence of attributes – hasAttribute

Returns a Boolean value that checks for the existence of the property

<body>
  <img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  console.log(img.hasAttribute("width"));
  console.log(img.hasAttribute("height"));
</script>
</body>
Copy the code

3.2.4 Deleting an Attribute – removeAttribute

Deletes an attribute

<body>
  <img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  img.removeAttribute("width");
  console.log(img.getAttribute("width"));
</script>
</body>
Copy the code

3.3 Dataset attribute – dataset

Any lower-case attribute name prefixed with data- is legal in HTML5 documents. These “dataset attributes” define a standard way to attach additional data

<body>
  <img id="img" data-x="100" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  var x = img.dataset.x;
  console.log(x);
</script>
</body>
Copy the code

3.4 Element Attributes – Attributes

The Node Node defines attributes, which are an array of attributes for an Element object

var attributes = img.attributes;
Copy the code

The value of the index Attributes object is the Attr object. Attr’s name and value return the name and value of the property

<body>
  <img id="img" data-x="100" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  var attributes = img.attributes;
  console.log(attributes[0].name+":"+ attributes[0].value);
  console.log(attributes.src.value);
  console.log(attributes["width"].value);
</script>
</body>
Copy the code

Element content

4.1 Element Content – innerHTML

The innerHTML attribute returns the content of the element as a string. It can also be used to replace the current content of the element

<body>
  <div id="parent"></div>
<script>
  var parent = document.querySelector("#parent");
  parent.innerHTML = < H1 > Lesson 30 ;
  alert(parent.innerHTML);
</script>
</body>
Copy the code

4.2 Elements and Content – outerHTML

The outerHTML property returns the element and its contents as a string. It can also be used to replace the current content of the element

<body>
  <div id="parent"</div> <script> var parent = document.querySelector()"#parent");
  alert(parent.outerHTML);
  parent.outerHTML = < H1 > Lesson 30 ; // Notice that div is changed to h1 </script> </body>Copy the code

4.3 Plain Text Element content – textContent

The standard way to query or replace the content of a plain text element is to use Node’s textContent property. In IE, you can use the innerText property of an Element instead

<body>
  <h1 id="title"< span style = "max-width: 100%; clear: both; min-height: 1em"main"></div>
<script>
  var title = document.querySelector("#title");
  console.log(title.textContent);
  title.textContent = "Lesson 30 2";
</script>
</body>
Copy the code

5. Create a node

5.1 Creating an Element node – createElement

Create a new Element node using the createElement () method of the Document object

<body>
  <div id="parent"></div>
<script>
  var parent = document.querySelector("#parent");
  var h1 = document.createElement("h1");
  h1.textContent = "Lesson 30";
  parent.appendChild(h1);
</script>
</body>
Copy the code

5.2 Creating a TextNode – createTextNode

Create a plain text node

<body>
  <h1 id="title"></h1>
<script>
  var title = document.querySelector("#title");
  var txt = document.createTextNode("Lesson 30");
  title.appendChild(txt);
</script>
</body>
Copy the code

5.3 Creating a DocumentFragment – createDocumentFragment

Using document fragments usually leads to better performance. Because the document fragment exists in memory, not in the Dom tree, inserting child elements into the document fragment does not cause page reflux (calculation of element position and geometry)

<body>
  <div id="parent"></div>
<script>
  var parent = document.querySelector("#parent");
  var fragment = document.createDocumentFragment();
  var h1 = document.createElement("h1");
  h1.textContent = "Lesson 30";
  fragment.append(h1);
  parent.append(fragment);
</script>
</body>
Copy the code

5.4 Creating a Comment node – createCmoment

Creating comment nodes is not often used

<body>
  <h1 id="title"</h1> <script> var title = document.querySelector("#title");
  var comment = document.createComment("Created by Murray");
  title.appendChild(comment);
</script>
</body>
Copy the code

5.5 Node Cloning — cloneNode

Create a new document node by copying an existing node. The true parameter indicates deep clone, false indicates shallow copy

<body>
  <div id="parent">
    <h1 class="title"</h1> </div> <script> var parent = document.querySelector"#parent");
  var titles = document.querySelectorAll(".title");
  var title2 = titles[0].cloneNode(true);
  parent.appendChild(title2);
</script>
</body>
Copy the code

6. Insert nodes

6.1 Inserting the Self Node: appendChild

Inserts a child node on the specified element and makes it the last child node of the node

<body>
  <div id="parent">
    <h1 id="title"</h1> </div> <script> var parent = document.querySelector"#parent");
  var h2 = document.createElement("h2");
  h2.textContent = "Murray's notebook.";
  parent.appendChild(h2);
</script>
</body>
Copy the code

6.2 insertBefore the node — insertBefore

Call this method on the parent node. 2. The first parameter indicates the node to be inserted. The second parameter is the child node that already exists in the parent node, and the new node is inserted in front of itCopy the code

<body>
  <div>
    <h2 id="subTitle"</h2> </div> <script> var h2 = document.querySelector("#subTitle");
  var h1 = document.createElement("h1");
  h1.textContent = "Lesson 30";
  h2.parentNode.insertBefore(h1,h2);
</script>
</body>
Copy the code

7. Delete and replace

7.1 Deleting a Child Node – removeChild

2. The parameter is the node to be deletedCopy the code

<body> <div> <h1> Lesson 30 </h1> <h2 id="subTitle"</h2> </div> <script> var h2 = document.querySelector("#subTitle");
  h2.parentNode.removeChild(h2);
</script>
</body>
Copy the code

7.2 Replacing the Child Node — replaceChild

The first parameter is the new node. The second parameter is the node to be replacedCopy the code

<body> <div> <h1> Lesson 30 </h1> <h2 id="subTitle"</h2> </div> <script> var h2 = document.querySelector("#subTitle");
  var h2n = document.createElement("h2");
  h2n.textContent = "Murray's New Notebook 2";
  h2.parentNode.replaceChild(h2n, h2);
</script>
</body>
Copy the code