Как определить, является ли элемент DOM в памяти элементом блока?

Question

У меня есть HTML-код в виде строки, и мне нужно обернуть все встроенные элементы внутри тега p, без их рендеринга.

Пример:

<h2>Some heading</h2>
<p>Some content</p>
<strong>Some inline content</strong>

должен быть преобразован в

<h2>Some heading</h2>
<p>Some content</p>
<p><strong>Some inline content</strong></p>

Я обрабатываю HTML, создавая DOM в памяти.

function ensureRootLevelBlockTags(html) {
    const psuedoDom = document.createElement('div');
    psuedoDom.innerHTML = html;

    const childNodes = psuedoDom.childNodes;
    for (let i = 0; i < childNodes.length; i++) {
        const currentNode = childNodes[i];
        if (/* is currentNode is not a block element */) {
            const newNode = document.createElement('p');
            newNode.append(currentNode);
            psuedoDom.insertBefore(newNode, childNodes[i]);
        }
    }

    return psuedoDom.innerHTML;
}

ensureRootLevelBlockTags('<h2>Some heading</h2><p>Some content</p><strong>Some inline content</strong>');

Мне нужно условие, которое я могу использовать, чтобы проверить, является ли элементэлемент блока.

Редактировать:

Мы уже использовали tinymce в проекте и обнаружили, что объект tinymce.html.Schema содержит список допустимых тегов и их допустимых дочерних элементов.Я использовал это как ссылку, чтобы проверить, могу ли я обернуть элемент внутри p.

Answer 1

Я не думаю, что вы действительно ищете "блочные" элементы (это частично основано на вашем комментарии о моем неправильном - теперь удаленном - ответе).Насколько я могу судить, вы ищете элементы верхнего уровня, которые могут появляться только в фразеализирующем контенте , и вы хотите обернуть их во что-то, что может появиться в flow content .

Но в категориях контента главное то, что большинство фразового контента также является совершенно корректным потоковым контентом;из Виды содержимого в спецификации:

Единственный способ увидеть то, что вы описываете, - это жестко закодироватьсписок типов элементов только для фраз и проверьте имена тегов по этому списку в цикле.

Этот список в настоящее время:

• a
• abbr
• area (если он является потомком элемента карты)
• audio
• b
• bdi
• bdo
• br
• button
• canvas
• cite
• code
• data
• datalist
• del
• dfn
• em
• embed
• i
• iframe
• img
• input
• ins
• kbd
• label
• link (если это разрешено в теле)
• map
• mark
• math (MathML)
• meta (при наличии атрибута itemprop)
• meter
• noscript
• object
• output
• picture
• progress
• q
• ruby
• s
• samp
• script
• select
• slot
• small
• span
• strong
• sub
• sup
• svg (SVG)
• template
• textarea
• time
• u
• var
• video
• wbr

Возможно, некоторые из них можно пропустить (например, link).

Но, опять же, они являются действительным содержимым потока, поэтому их не нужно оборачивать.

Answer 2

Попробуйте использовать элемент node.style.display.результаты будут либо block, inline, none, либо inline-block.

Answer 3

Используйте свойство element tagName , чтобы проверить, является ли узел / элемент одним из элементов уровня блока (например, https://www.google.com/search?q=html+block+elements&ie=utf-8&oe=utf-8&client=firefox-b дает следующие элементы в качестве уровня блока)

• стр.
• h1, h2, h3, h4, h5, h6.
• ол, ул.
• пред.
• address.
• blockquote.
• dl.
• div.

Так что-то вроде следующего должно сделать:

const BLOCK_LEVEL = {'DIV':1, 'DL':1, 'BLOCKQUOTE':1 /*, ..*/};
// rest code here
const currentNode = childNodes[i];
   if (currentNode.tagName && BLOCK_LEVEL[currentNode.tagName]) {
       // is block-level element, handle accordingly
   }