在这里插入图片描述

JS——DOM

Document Object Model （文档对象模型）

1 知识点

1.1 DOM 是哪种基本的数据类型

DOM就是把html进行结构化，结构化成浏览器、js可以识别的模型

1.2 DOM 节点操作

获取 DOM 节点：
①property
②attribute

property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；

property能够从attribute中得到同步；
attribute不会同步property上的值；
attribute和property之间的数据绑定是单向的，attribute->property；
更改property和attribute上的任意值，都会将更新反映到HTML页面中。

1.3 DOM 结构操作

增删查改

增（document.createElement、appenChild 、insetBefore）

删（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 问答

题目：（全部在知识点有答案）
*DOM 是哪种基本的数据结构？
*DOM 操作的常用API有哪些？
*DOM 节点的 attr 和 property 有何区别

JS//DOM