1. What is DOM

- DOM: Document Object Model
- Document Object Model, through DOM you can arbitrarily modify each content in the web page

Two, DOM composition

document

A document refers to a web page, and a web page is a document

object

Object refers to converting each node in the webpage into an object

After converting the object, the web page can be manipulated in a pure object-oriented form

Model

The model is used to represent the relationship between nodes and nodes, which is convenient to operate the page

Node

       A node is the most basic unit that constitutes a web page. Every part of a web page can be called a node.
       Although they are all nodes, the types of nodes are different and commonly
       used nodes.

           Element node (Element), representing the label in the web page

           Attribute node (Attribute), representing the attribute in the label

           Text node (Text), representing the text content in the web page

3. DOM query

1. Document query method

In the web page, the browser has provided us with a document object, which represents the entire web page, which is a property of the window object and can be used directly in the page.

Document query method:

Query an element node object based on the element's id attribute

Query a set of element node objects based on the value of the element's name attribute

Query a set of element node objects based on the class name of the element

Query a set of element node objects according to the label name

document.getElementById("id属性值");//根据元素的id属性查询
document.getElementsByName("name属性值");//根据元素的name属性值查询
document.getElementsByClassName("name属性值");//根据元素的类名查询
document.getElementsByTagName("标签名");//根据标签名来查询

2. Query through specific element nodes

(1) Element.getElementsByTagName(): Query the specified descendant element of the current element through the tag name

(2) Element.childNodes Get all child nodes of the current element and get blank text child nodes

(3) Element.children: Get all child elements of the current element

(4) Element.firstChild: Get the first child node of the current element

(5) Element.lastChild: Get the last child node of the current element

(6) Element.parentNode: Get the parent element of the current element

(7) Element.previousSibling: Get the previous sibling node of the current element

(8) Element.nextSibling: Get the next sibling node of the current element

(9) Element.firstElementChild Find the first child element node under the parent node

(10) Element.lastElementChild Find the last child element node under the parent node

(11) Child node.parentElement Find the parent element through the child node

Four, DOM modification

1. document.createElement(): Create an element node object according to the tag name

2. Parent node.appendChild (child node): Add the specified child node to the parent node

3. Parent node.removeChild(child node): Delete the specified child node
method: child node.parentNode.removeChild(child node)

 var oUl = document.getElementById("box");
    // console.log(oUl.children);
    oUl.getAttribute("title");//查询属性名为title的属性值
    oUl.setAttribute("a", "hello");//设置属性名为a，属性值为hello
    oUl.removeAttribute("a")//删除属性名a及其属性值
    console.log(oUl);

JavaScript----DOM object