4

phpスクリプトから動的に生成されたhtmlがいくつかあります。phpコードは次のようになります

echo "<div id='categories'>\n";
foreach($category as $k => $v)
{
echo "<div class='category'>\n";
echo "<div id=\"$k\" class='cat_name'\n>$k</div>\n";
echo "<div id=\"$k".'_link"'." class='cat_link'>\n<a href=$v>Link</a>\n</div>\n";
echo "</div>\n";
}
echo "</div>\n";

私はこのようなdomにアクセスしようとするjavascriptファイルを持っています

var categories=document.getElementById('categories').childNodes;
for(i=0;i<categories.length;i++)
{
var link=categories[i].childNodes[1].childNodes[0].attributes['href'];
..
...
..

htmlにテキストノードがあるため、これは期待どおりに機能しません。私がfirebug consoleこれを試すために使用したとき

document.getElementById('categories').childNodes[0].nodeType; // displays 3

3ノードが。であることを意味するが表示されますtext node。このように追加document.normalize();してみましたwindow.onload

window.onload=function() {
document.normalize();
var categories=document.getElementById('categories').childNodes;
...
...

ただし、テキストノードはhtmlに残ります。すべてのテキストノードを削除するにはどうすればよいですか。今、私はそのような方法があるとは思わないgetElementByType()ので、どのようにすべてのテキストノードを取得するのですか？

4

4 に答える 4

4

.children代わりに、.childNodes要素のみをターゲットにする（テキストノードなし）ために使用します。

   // --------------------------------------------------v
var categories=document.getElementById('categories').children;

FF3はそのプロパティをサポートしていないため、そのブラウザをサポートしている場合は、それを複製するためのメソッドが必要になります。

function children( parent ) {
    var node = parent.firstChild;
    var result = [];
    if( node ) {
        do {
            if( node.nodeType === 1 ) {
                result.push( node );
            }
        } while( node = node.nextSibling )
    }
    return result;
}
var parent = document.getElementById('categories');
var categories= parent.children || children( parent );

また、IEはコメントノードも提供するため、マークアップにコメントが含まれていない方がよいことに注意してください。

于 2011-06-24T19:11:21.460 に答える
4

EE2015構文：

var elm = document.querySelector('ul');

console.log(elm.outerHTML);

// remove all text nodes
[...this.elm.childNodes].forEach(elm => elm.nodeType != 1 && elm.parentNode.removeChild(elm))

console.log(elm.outerHTML);
<ul>
  <li>1</li>
  a
  <li>2</li>
  b
  <li>3</li>
</ul>

壊す：

  1. すべての子供を取得
  2. HTMLCollectionを配列に変換する
  3. 配列をトラバースし、各アイテムがテキストノードタイプであるかどうかを確認します
  4. その場合は、DOMからアイテムを削除します

これにより、直接子のテキストノードのみが削除され、ツリーのより深い部分は削除されません。

NodeIteratorを使用：

var elm = document.querySelector('ul')

// print HTML BEFORE removing text nodes
console.log(elm.outerHTML)

// remove all text nodes
var iter = document.createNodeIterator(elm, NodeFilter.SHOW_TEXT)
var node;
while (node = iter.nextNode()) {
    node.parentNode.removeChild(node)
}

// print HTML AFTER removing text nodes
console.log(elm.outerHTML)
<ul>
  <li>1</li>
  <li>2</li>
  <li>3<span>4</span></li>
</ul>

于 2018-12-12T14:13:24.503 に答える
0

ループ内の各ノードを確認し、それがテキストノードである場合は、言ったとおりに削除するか、何もしません。テキストノードでない場合は、実行したいアクションを実行します。

于 2011-06-24T19:07:57.527 に答える
0

代わりにgetElementsByClassName MDCドキュメントを使用してみませんか？

var categories=document.getElementByClassName('category');

ネイティブでサポートされていないブラウザについては、次の実装を参照してください：http: //ejohn.org/blog/getelementsbyclassname-speed-comparison/

于 2011-06-24T19:01:49.133 に答える