twodogs пишет:В этом всем только начинаю разбираться, по этому если можно, то объясните пожалуйста более понятней как это можно реализовать.Есть две страницы - "A" и "B", на "B" подсчитывается количество div блоков и полученный результат нужно передать в тег p на странице "A"
Добрый день!
Чтобы было понятнее, в начале немного объектах и DOM (документ объект модели) Java Script:
1. Объект window - ассоциаируется с активным окном браузера.
Этот объект имеет несколько свойств, одно из которых - location, мы применим в Ваших скриптах.
2. Объект document - ассоциаируется с активным html документом.
3. DOM - дерево, узлы, которого - элементы DOM, ассоциаруются с тегами html документа.
Например, в Вашем случае тэг <section class="content"> явлется ParentNode родительким узлом
для ChildNode дочерних узлов (элементов) - тэгов div.
4. Для манипуляций элементами DOM в JS предусмотрено несколько методов для объекта document,
один из которых - document.querySelectorAll.
Например, в Вашем случае document.querySelectorAll('.content > div'),
возвращает коллекцию элементов NodeList состоящую из трёх ChildNode дочерних элемента ParentNode - тэга <section class="content">.
Вы допустили серьёзную ошибку пытаясь в JS документа "B.html" манимулировать элементами из документа "A.html".
Важно! В JS допускается манипулировать только определёнными элементами DOM и только
после полной загрузки документа, например, задав <script>...</script> после тэга </body>.
5. В Вашем случае, требуется в документе " В.html" определить количество элементов в NodeList, используя свойство length
и передать результат в документ " A.html"
Для этого в документе " В.html" нужно задать: window.location.href="A.html?DivL=" + NodeList.length;
В результате будет загружен документ " A.html", в котором из URL будет получено
значение GET-параметра DivL и затем вставлено в ElementSpan.
B.html Спойлер (Отобразить)CODE ( html):
скопировать код в буфер обмена
<html> <body> <section class="content"> <div>1a<div>1.1</div><div>1.1</div></div> <div>2a</div> <div>3a</div> </section> </body> <script> NodeList = document.querySelectorAll('.content > div'); console.log(NodeList); /* NodeList(3) [ div, div, div ]​ 0: <div>​ 1: <div>​ 2: <div>​ length: 3 */ alert(NodeList.length); /* 3 */ window.location.href="A.html?DivL=" + NodeList.length; </script> </html>
A.htmlСпойлер (Отобразить)CODE ( html):
скопировать код в буфер обмена
<html> <head> <meta charset="utf-8"> </head> <body> <h1>Страница "A"</h1> <div><p class="result">Вот тут должна выводиться цифра <span>1</span></p></div> </body> <script> url = window.location; DivL = url.toString().split("=")[1]; ElementSpan = document.querySelectorAll('.result > span')[0]; ElementSpan.innerHTML = DivL; </script> </html>
Удачи!(Отредактировано автором: 24 Ноября, 2021 - 13:17:52)
|