Блог

Главная - Вопросы по программированию - Как предупредить все p с помощью javascript?

Как предупредить все p с помощью javascript?

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Я узнаю, как предупредить весь html-код с веб-страницы, используя этот код:

 var markup = document.document.innerHTML; 
alert(markup);

Я хочу предупредить только все <p>

Я попробовал этот код

 var markup = document.getElementsByTag('p').innerHTML;
alert(markup);`

Но это не работает

Комментарии:

1. Каков ожидаемый результат?

2. Это getElementsByTagName() . И это создает список узлов, который вы должны зациклить. Смотрите это

Ответ №1:

document.getElementsByTagName("p") возвращает HTMLCollection, который вы можете преобразовать в массив с помощью оператора spread . Затем вам нужно получить innerHTML для каждого элемента массива. Наконец, вы можете объединить их innerHTML вместе, чтобы вывести их:

 var pElements = [ ... document.getElementsByTagName("p") ];
var pMarkup   = pElements.map( element => element.innerHTML );
alert( pMarkup.join( "n" ) );  
 <p>abc<strong>def</strong></p>
<table><tr><td>Don't show this</td></tr></table>
<p>ghi<em>jkl</em></p>

Ответ №2:

Я думаю, вы после HTMLElement.outerHTML 

 // All p's
const pTags = document.querySelectorAll('p');

const output = [...pTags].map(p => p.outerHTML).join("");

console.log(output);  
 .red {
  color: red;
}  
 <p class="red">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at fermentum turpis. Maecenas congue accumsan enim, et dictum turpis malesuada et.
</p>
<p>
  Mauris vitae pretium tortor. Aenean nulla ante, scelerisque in erat ac, tincidunt porttitor dolor. Sed blandit sed mi at vulputate.
</p>
<p id="three">
  Curabitur lobortis at augue at hendrerit. Mauris id ligula cursus ligula dictum viverra.
</p>
<p>
  Sed suscipit varius orci. Duis sit amet fermentum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo turpis in neque aliquam, et laoreet odio consequat.
</p>
<p data-number="5">
  Nam dolor neque, lacinia sed viverra et, cursus ac ipsum. Cras gravida quam enim, sit amet tristique urna faucibus non.
</p>
<p>
  Phasellus cursus, justo a volutpat pulvinar, ligula metus mollis turpis, in tincidunt ante nisl non nunc.
</p>