Question

如果我有两个HTML元素应始终包含相同的内部HTML文本，那么同时更新它们的最佳方式是什么？

例如：

<head>
    <title id="pageTitle">My Application</title>
</head>
<body>
    <h1 id="screenTitle">My Application</h1>
</body>

我希望每当JavaScript函数更改其中一个时，screenTitle和pageTitle的innerHTML保持相同。

我知道我可以遍历pageTitle和screenTitle元素，每当我更改字符串“My Application”时更新它们，但是有更优雅的方式吗？

Answer 1

document.title.innerHTML在IE中是只读的。这应该是一个跨浏览器的方法：

document.getElementById('screenTitle').innerHTML = document.title = 'My Application';

您可以使用变量ofcourse来代替文字值。

如果你真的需要一些“优雅”（===异国情调），你可以使用setter：

var page = {
    set title(text) {
        document.getElementById('screenTitle').innerHTML = document.title = text;
    }
};

当您需要更改标题时，只需设置它：page.title = newTitle;。只有您需要关心的是，您可以从当前范围中引用page对象。此外，这只适用于现代浏览器。

Answer 2

使用单个函数封装对两个元素的写入。因此，代替直接使用DOM方法，其余代码将使用如下函数：

function setTitle(newTitle)
{
    document.getElementById('pageTitle').innerHTML = newTitle;
    document.getElementById('screenTitle').innerHTML = newTitle;
}

当然，这可能会被优化/干燥/重构/过度设计，令人作呕......

function setTitle(newTitle)
{
    if (setTitle.elements)
    {
        var id = document.getElementByIdl
        setTitle.elements = [id('pageTitle'), id('screenTitle')];
    }

    setTitle.elements.forEach(function (elt)
    {
        elt.innerHTML = newTitle;
    });
}

Answer 3

只要您控制将要修改元素的所有代码，就应该创建一个同时更新两者的JS方法。类似的东西：

function updateElementGroup( newInnerHTML ) {
    document.getElementById( 'pageTitle' ).innerHTML = newInnerHTML;
    document.getElementById( 'screenTitle' ).innerHTML = newInnerHTM;
}

您可以这样使用：

updateElementGroup( 'New Text' );

如果您无法控制所有代码，您可以设置一些侦听器，以便在更改时更好地捕获并更新另一个，如下所示：

var isUpdating = false;
var elements = [
    document.getElementById( 'pageTitle' ),
    document.getElementById( 'screenTitle' ),
];

for ( i in elements ) {
    elements[i].addEventListener( 'DOMCharacterDataModified', function( evt ) {
        if ( isUpdating ) {
            return;
        }

        isUpdating = true;

        for ( i in elements ) {
            elements[i].innerHTML = evt.newValue;
        }

        isUpdating = false;
    } );
}

Answer 4

使用jQuery：

$('#pageTitle').bind('DOMSubtreeModified', function() {
    if ($('#pageTitle').html() != $('#screenTitle').html())
        $('#screenTitle').html($('#pageTitle').html());
});

$('#screenTitle').bind('DOMSubtreeModified', function() {
    if ($('#pageTitle').html() != $('#screenTitle').html())
        $('#pageTitle').html($('#screenTitle').html());
});

最优雅的方式是让一个HTML元素镜像另一个？

4 个答案: