Insert picture description here

JS —— DOM

Document Object Model

1 knowledge points

1.1 What kind of basic data type is DOM

DOM is to structure html and structure it into a model that can be recognized by browsers and js

1.2 DOM node operation

Get DOM node:
①property
②attribute

Property is an attribute in the DOM, an object in JavaScript ;
attribute is a feature on an HTML tag, and its value can only be a string;

The property can be synchronized from the attribute; the
attribute will not synchronize the value on the
property; the data binding between the attribute and the property is one-way, attribute->property ;
changing any value on the property and the attribute will reflect the update to HTML page .

1.3 DOM structure manipulation

Add, delete, check and modify

增（document.createElement、appenChild 、insetBefore）

Delete (removeChild)

查（document.getElementById、TagName…）

改（replaceChild）

* 增
创建 ——   
    document.createElement(tagName);    /*元素节点*/
    document.createTextNode(data);    /*文本节点*/
    document.createAttribute(name);    /*属性节点*/
加入 ——
    appendChild(aChild)  
    innerHTML
    innerText
    insertBefore(newElement, referenceElement) 
其它 ——
    style. 的操作  /  setAttribute(name, value)
————————————
* 删
    removeChild(child) 、removeAttributeNode(attributeNode)
————————————
* 查
标准DOM API —— 
    document.getElementById(id);
    document.getElementsByTagName(name);
    document.getElementsByName(name);
    document.getElementsByClassName(names);
    document.querySelectorAll(selectors);
亲属访问 ——
    父关系 parentNode / parentElement 
    子关系 children / childNodes / firstChild / lastChild
    兄弟关系 previousSibling / nextSibling / previousElementSibling / nextElementSibling
属性获取 ——
    getAttribute(attributeName);  /  getAttributeNode(attrName);
————————————
* 改
修改节点 —— repaceChild（newChild, oldChild）
修改样式 —— style.*** = sss;  /  setAttribute（name，value）
修改文本 —— innerHTML  /  innerText  /  nodeValue
修改属性 —— setAttribute（name，value）  /  . 属性名 = 值

2 Q&A

Question: (All the answers are in the knowledge points)
*What kind of basic data structure is DOM?
*What are the commonly used APIs for DOM operations?
*What is the difference between attr and property of DOM node

JS // DOM