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 有何区别