вывести значение childNode в javascript

Question

как я могу использовать js для вывода значения childNode с alert (); функция или создание нового элемента. например .. есть это:

<ul id="main">
  <li>
   <h2>Alec</h2>
   <p>NX-01</p>
   <p>command: 2151</p>
  </li>
  <li>simple</li> 
  <li>William</li>
</ul>

<script>
var element = document.getElementById("main");
var values = element.childNodes[1].nodeValue; // the text simple this i want to output
alert('the value is:' + values);
</script>

Answer 1

Вы можете использовать его innerText свойство:

var element = document.getElementById("main");
var values = element.childNodes[1].innerText;
alert('the value is:' + values);
// Alec NX-01 command: 2151

Выше следует печатать все текстовое содержимое первого элемента <li> (команда Alec NX-01: 2151)

Для дальнейшего уточнения и получения значения Alec, например, используйте другой .childNodes[1]

var element = document.getElementById("main");
var values = element.childNodes[1].childNodes[1].innerText;
alert('the value is:' + values);

// Alec

Answer 2

Используйте .nodeValue для IE и .textContent для других браузеров.

Answer 3

Вы можете использовать innerText вместо nodeValue, чтобы получить весь текст внутри <li> и его дочерних элементов. Смотрите здесь для рабочего примера: http://jsfiddle.net/B7Lvd/

Answer 4

Необходимо учитывать текстовые узлы, содержащие только пробелы. В большинстве браузеров эти узлы отображаются как текстовые узлы в коллекции childNodes узла, тогда как в IE <9 они игнорируются. Поэтому вам нужно проверять свойство <code>nodeType при переборе childNodes. Кроме того, nodeValue не даст вам текст внутри интересующего вас элемента <li>: вам нужно использовать стандартное свойство textContent DOM (возвращаясь к аналогичному свойству innerText в браузерах, которые не поддерживают textContent).

function getChildElement(element, index) {
    var elementCount = 0;
    var child = element.firstChild;

    while (child) {
        if (child.nodeType == 1)  { // Node with nodeType 1 is an Element
            if (elementCount == index) {
                return child;
            }
            elementCount++;
        }
        child = child.nextSibling;
    }
}

var element = document.getElementById("main");
var child = getChildElement(element, 1);
var text = child.textContent || child.innerText;
alert("Found element with text " + text);

Answer 5

Использование jQuery сделало бы это намного проще, но с ванильным javascript вы могли бы сделать это следующим образом.

var element = document.getElementById("main");
var values = element.childNodes;

for(var i in values) {
    if(values[i].innerHTML == 'simple') {
        alert('The value is: ' +values[i]);
    }
}

Или вы можете обращаться к детям по отдельности со значениями [0], значениями [1] и т. Д. Этот вопрос немного сложен для понимания, но я думаю, что именно это вы и хотите сделать.

Answer 6

Возможно, вы ищете это:

var values = element.childNodes[1].innerHTML;