html中的dom图形,html 中shadow DOM 的使用

最新推荐文章于 2024-12-19 15:06:55 发布

镝不咸

最新推荐文章于 2024-12-19 15:06:55 发布

阅读量204

点赞数

文章标签： html中的dom图形

ShadowDOM是Web Components技术的一部分，用于提供元素的封装，确保样式和结构只影响组件内部，保持页面代码整洁。通过创建ShadowRoot，元素可以附加一个独立的隐藏DOM。本文介绍了ShadowDOM的基本用法，并给出了示例代码，展示了如何创建包含输入框的自定义组件，并控制其样式。当点击按钮时，能够获取到ShadowDOM中输入框的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是shadow DOM?

An important aspect ofweb components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.

下面这个是shadow DOM 的使用例子：

html:

shadowDOM

#div {

300px;

height: 50px;

border: 1px solid #666;

padding: 15px;

}

这里是不显示出来的

点我点我

javascript:

function createShadowDOM(elem) {

var root = elem.createShadowRoot();

root.appendChild(createStyle());

root.appendChild(createInputDiv("姓名","name"));

}

function createStyle() {

var style = document.createElement('style');

style.textContent = 'div.input-div { height: 30px; 250px; }' +

'font.input-font { line-height: 30px;font-size: 16px;color: #495A80; margin-right: 10px;}'+

'span.input-area { 200px;height: 25px;line-height: 25px;padding-left: 5px;display:inline-block;color: #666;font-size: 16px;border: 1px solid #999;border-radius: 3px;}';

return style;

}

function createInputDiv(font, name) {

var inputDiv = document.createElement('div');

inputDiv.className = 'input-div';

inputDiv.innerHTML = "" + font + "";

return inputDiv;

}

createShadowDOM(document.querySelector("#div"));

document.querySelector('button').addEventListener('click', function() {

console.log(document.querySelector('#div').shadowRoot.querySelector('#name').innerHTML);

})

结果:

This article assumes you are already familiar with the concept of the DOM (Document Object Model) — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an HTML document in the case of web documents). As an example, consider the following HTML fragment:

两个其前端前沿网站：

----------------------------------------------------------------------------------------------------------