Open LastPoem opened 4 years ago
DOM, 称为文档对象模型。实际上就是HTML中的各种标签节点。DOM属于浏览器，而不是JS语言规范里规定的核心内容。 但是JS存在编程接口访问和修改HTML DOM。 DOM相关主要内容：
1.DOM节点类型 元素节点：每个HTML标签都是一个元素节点 值为1 属性节点：元素节点的属性，如id，class等 值为2 文本节点：元素节点或属性节点中的文本内容 值为3 注释节点：表示文档注释，形式为 值为8 文档节点：表示整个文档，即DOM树的根节点，document 值为9
2.查找元素 document.getElementById document.getElementsByName document.getElementsByClassName document.getElementsByTagName
parentNode childNodes firstChild lastChild nextSibling previousSibling parentElement children firstElementChild lastElementChild nextElementSibling previousElementSibling
3.操作
内容： innerHTML innerText value
属性： attributes setAttribute(key, value) getAttribute(key)
class: className classList.remove(cls) classList.add(cls)
标签操作： 创建： let tag = document.createElement('a') tag.innerHTML = 'sdfa' ... 或者 let tag = " sdfa "
操作： let obj = "" xxx.insertAdjacementHTML('beforeEnd', obj) xxx.insertAdjacementElement('afterBegin', document.createElement('p')) 第一个参数只能是beforeBegin afterBegin beforeEnd afterEnd
或者 let tag = document.createElement('a') xxx.appendChild(tag) xxx.insertBefore(tag, xxx[1])
样式操作 let obj = document.getElementById('i1') obj.style.fontSize = '32px'
4.事件 onabort 图像的加载被中断 onblur 元素失焦 onchange 域的内容被改变 onclick 点击事件 ondbclick 双击事件 onerror 加载文档或图像时发生错误 onfocus 元素获得焦点 onkeydown 某个键盘按键被按下 onkeypress 某个键盘被按下并松开 onkeyup 某个按键被松开 onload 一张页面或一幅图像完成加载 onmousedown 鼠标按钮被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 onmouseover 鼠标移到某元素上 onmouseup 鼠标松开 onreset 重置 onresize 窗口或框架被重新调整大小 onselect 文本被选中 onsubmit 确认 onunload 用户退出页面
一、DOM
DOM, 称为文档对象模型。实际上就是HTML中的各种标签节点。DOM属于浏览器，而不是JS语言规范里规定的核心内容。 但是JS存在编程接口访问和修改HTML DOM。 DOM相关主要内容：
1.DOM节点类型 元素节点：每个HTML标签都是一个元素节点 值为1 属性节点：元素节点的属性，如id，class等 值为2 文本节点：元素节点或属性节点中的文本内容 值为3 注释节点：表示文档注释，形式为 值为8 文档节点：表示整个文档，即DOM树的根节点，document 值为9
2.查找元素 document.getElementById document.getElementsByName document.getElementsByClassName document.getElementsByTagName
parentNode childNodes firstChild lastChild nextSibling previousSibling parentElement children firstElementChild lastElementChild nextElementSibling previousElementSibling
3.操作
内容： innerHTML innerText value
属性： attributes setAttribute(key, value) getAttribute(key)
class: className classList.remove(cls) classList.add(cls)
标签操作： 创建： let tag = document.createElement('a') tag.innerHTML = 'sdfa' ... 或者 let tag = " sdfa "
操作： let obj = "" xxx.insertAdjacementHTML('beforeEnd', obj) xxx.insertAdjacementElement('afterBegin', document.createElement('p')) 第一个参数只能是beforeBegin afterBegin beforeEnd afterEnd
或者 let tag = document.createElement('a') xxx.appendChild(tag) xxx.insertBefore(tag, xxx[1])
样式操作 let obj = document.getElementById('i1') obj.style.fontSize = '32px'
4.事件 onabort 图像的加载被中断 onblur 元素失焦 onchange 域的内容被改变 onclick 点击事件 ondbclick 双击事件 onerror 加载文档或图像时发生错误 onfocus 元素获得焦点 onkeydown 某个键盘按键被按下 onkeypress 某个键盘被按下并松开 onkeyup 某个按键被松开 onload 一张页面或一幅图像完成加载 onmousedown 鼠标按钮被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 onmouseover 鼠标移到某元素上 onmouseup 鼠标松开 onreset 重置 onresize 窗口或框架被重新调整大小 onselect 文本被选中 onsubmit 确认 onunload 用户退出页面