innerHTML
从对象的起始位置到终止位置的全部内容,包括Html标签
<span>sdsdsdsd <span>555</span></span>bbbb
innerText
从起始位置到终点位置的内容,去掉HTML内容,并且如果里面有多个标签或者迭代子代都是去除标签的
sdsdsdsd 555 bbb
outerHTML
除了包含innerHTML的全部内容外,还包含对象标签本身
textContent
跟innerText 返回的结果一样
重要
根据W3C标签,尽量用innerHTML,textContent,而少用innerText,outerHTML
动态访问DOM 方法 描述document.createElement(``tag) 创建并返回一个HTML标签tag。
element.appendChild(``child) 添加的元素child里面element。
element.insertAdjacentHTML(``pos,``html) 将代码插入html中element。
element.insertAdjacentElement(``pos,``node) 将元素node插入element
正常情况下我们使用的时候
class AppElement extends HTMLElement { name = this.getAttribute("name") || "Desconocido"; connectedCallback() { const element = document.createElement("div"); element.className = "element"; this.appendChild(element); const innerElement = document.createElement("div"); innerElement.textContent = this.name; element.appendChild(innerElement); } } 数据类型 特定类型 标签 描述HTMLElement HTMLDivElement <div> 看不见的分隔层（块中）。
HTMLElement HTMLSpanElement <span> 不可见的分隔层（在线）。
HTMLElement HTMLImageElement <img> 图片。
HTMLElement HTMLAudioElement <audio> 音频容器。
inserAdjacentHTML
element.insertAdjacentHTML(position, text);position
插入内容的位置
'beforebegin'：元素自身的前面。
'afterbegin'：插入元素内部的第一个子节点之前。
'beforeend'：插入元素内部的最后一个子节点之后。
'afterend'：元素自身的后面。
text
解析为html,并插入到DOM树上,字符串类型
// 原为 <div>one</div> var d1 = document.getElementById('one'); d1.insertAdjacentHTML('afterend', '<div>two</div>'); // 此时，新结构变成： // <div>one</div><div>two</div> insertAdjacentElement(position, element);个人觉得这个用的比较多
position
DOMString 表示相对于该元素的位置；必须是以下字符串之一：
'beforebegin': 在该元素本身的前面.
'afterbegin':只在该元素当中, 在该元素第一个子孩子前面.
'beforeend':只在该元素当中, 在该元素最后一个子孩子后面.
'afterend': 在该元素本身的后面.
<div>one</div> <script> let span = document.createElement('span'); span.textContent='3333'; let one=document.querySelector('#one'); one.insertAdjacentElement('beforebegin',span) </script> content.cloneNode(deep)deep为 true 的时候,就是创建一个深层克隆,为false就是浅拷贝
我们要目标这个适用于自定义元素
// 创建一个自定义组件 const template = document.createElement("template"); template.innerHTML = ` <div> <div></div> </div>`; // 讲自定义组件拷贝到AppElement 里面 class AppElement extends HTMLElement { name = this.getAttribute("name") || "Desconocido"; connectedCallback() { const markup = template.content.cloneNode((true)); markup.querySelector(".name").textContent = this.name; this.appendChild(markup); } } shadow DOM 影子DOM在javascript不同框架出现后,他们设计了Virstual DOM: 页面DOM的内存中副本,可以直接管理更改,以便后面转换为文档的真实DOM,目的是加快优化页面的DOM更改
例如:react 引入虚拟DOM,已检测更改(树之间的差异), 更新受影响的节点,然后再将其传递给真实的dom
语法
const div = document.createElement("div"); const shadow = div.attachShadow({ mode: "open" }); div.shadowRoot === shadow; // truemode 定义了shadow DOM的封装模式,创建shadow Dom元素将具有一个属性,通过.shadowRoot 访问
封装css