从原生web组件到框架组件源码(二)

从原生web组件到框架组件源码(二)

innerHTML outerHTML textContent innerText 区别 <div> <span>sdsdsdsd <span>555</span></span> bbbb </div>

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  

从原生web组件到框架组件源码(二)

正常情况下我们使用的时候

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; // true

mode 定义了shadow DOM的封装模式,创建shadow Dom元素将具有一个属性,通过.shadowRoot 访问

封装css

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwpdfz.html