JavaScript --DOM learning diary

Conventional DOM operations comprising: obtaining a document element; 2. document elements CRUD operations; 3 event operation...

Document loading process

1. Problems

When the browser loads a page is loaded from top to bottom in the order, if the scriptlabel is written headinside, when code is executed, the page has not loaded, the page has not loaded the DOM object, which can result in JS unable to get into the page's DOM object.

2. Solution

1) onload event

onloadEvent is triggered only after the entire page loads. To windowbind an onloadevent, the event corresponding response function will be executed after the page loads, so that you can ensure that our code to perform all of the DOM object has been loaded.

2) The script tag on the body tail

3) Recommendation: a combination of both

Documentation page elements acquired

1. The acquisition element id

var btn = document.getElementById("btn");

2. Obtain the elements under the label name

var btn = document.getElementsByTagName("button")[0];

3. Get element according to name

var btn = document.getElementsByName("btn")[0];

The element 4. Get Class Name

var btn = document.getElementsByClassName("btn")[0]

The selection element acquires

// 返回第一个符合选择器的DOM节点
var btn1 = document.querySelector("#btn");
var btn2 = document.querySelector("button");
var btn3 = document.querySelector(".btn");
// 返回所有符合选择器的DOM节点的集合
var btn4 = document.querySelectorAll("#btn")[0];
var btn5 = document.querySelectorAll(".btn")[0];

The relationship between the nodes

All content pages are nodes, including tags, attributes, text, comments, and so on.

1. Get the parent node

var a = document.getElementsByTagName("a")[0];
var b = a.parentNode;  // 获取父节点
var c = a.parentElement;  // 获取父节点

2. Get sibling

var span = document.getElementById("span");
// 获取下一个兄弟节点
var nextEle = span.nextElementSibling || span.nextSibling;  // nextSibling方法获取到的节点包括换行和注释等标签  
// 获取上一个兄弟节点
var preEle = span.previousElementSibling || span.previousSibling;
// 获取任意兄弟节点
var siblings = span.parentNode.children;  // 所有的同级节点
var one = siblings[1]  // 通过索引获取任意兄弟节点

3. Get the child node

var box = document.querySelector("#box");
// 获取第一个子节点
var firstChild = box.firstElementChild || box.firstChild;
// 获取最后一个子节点
var lastChild = box.lastElementChild || box.lastChild;
// 获取所有的子节点
var children = box.childNodes;  // 包括换行、注释等子节点
var children2 = box.children;  // 所有元素子节点

4. The property nodes nodeType

Each node has an nodeTypeattribute is used to indicate the type of node. Node node type represented by type defined in the 12 constants. Here are a few commonly used.

Constant name	Constant value	Node Type	description
Node.ELEMENT_NODE	1	Element	Representatives element node
Node.ATTRIBUTE_NODE	2	Attr	An attribute node
Node.TEXT_NODE	3	Text	On behalf of an element or text content attributes
Node.COMMENT_NODE	8	Comment	On behalf of the comment node
Node.DOCUMENT_NODE	9	Document	On behalf of the entire document (DOM tree root node)

window.onload = function(ev) {
  // 获取标签
  var box = document.getElementById("box");
  // 获取标签内部的所有节点
  var allNodeList = box.childNodes;
  // 过滤元素节点
  var newArr = [];
  allNodeList.forEach(function(value, key, parent) {
    if (value.nodeType === 1) {
      newArr.push(value);
    }
  })
}