ホームページ  >  記事  >  ウェブフロントエンド  >  オリジナルJSで追加、削除、変更、確認、挿入を実装

オリジナルJSで追加、削除、変更、確認、挿入を実装

一个新手
一个新手オリジナル
2017-09-21 09:35:381818ブラウズ

1. 追加

创建元素节点 :document.createElement(“p”); 
创建text节点 :document.createTextNodet(“内容”); 
复制一个节点: var newNode = node.cloneNode();//参数为true复制所有子节点,参数为false只执行一次浅复制。

2. 削除

removeChild();//该方法不是在待删除的节点上调用,而是在它的父元素节点上调用。 
node.parentElement.removeChild(node); 
replaceChild();//删除一个子节点,并用一个新的节点取代它。第一个参数是新节点,第二个参数是要删除的节点。 
node.parentElement.replaceChild(newNode,node);

3. 多くの場合、ノード

属性

コンテンツを変更する必要があります。
属性の変更 属性は標準HTML属性と非標準HTML属性に分けられます。 *
Element の属性としての HTML 属性
HTML 要素は、id、title lang、dir 属性などの一般的な HTTP 属性と、イベント ハンドラー属性 (onclick) を定義します。特定の要素のサブタイプには、img の src 属性などの特定の属性もあります。

var oImg = document.getElementById("img1");oImg.id = "newID";oImg.className = "className";oImg.src = "...";

非標準の HTML 属性の取得と設定

Element は、非標準属性をクエリして設定する getAttribute メソッドと setAttribute メソッド、名前付き属性が存在するかどうかを検出して属性を完全に削除する hasAttribute メソッドと RemoveAttribute メソッドを定義します。

コンテンツの変更 innerHTML: タグを含むコンテンツ innerText (Firefox ではサポートされていません): プレーンテキストの要素コンテンツ
textContent (IE ではサポートされていません): プレーンテキストの要素コンテンツ

4.

    ワンステップで検索

  • document.getElementById()   返回对拥有指定 id 的第一个对象的引用。 
    document. getElementsByClassName()  返回文档中所有指定类名的元素集合。 
    document.getElementsByName()    返回带有指定名称的对象集合。 
    document.getElementsByTagName() 返回带有指定标签名的对象集合。

  • 父親、息子、兄弟を検索

  • 对于一个Node节点,包含很多种,像:Document节点、Text节点、Comment节点、Element节点,我们常常需要获得的是元素节点,忽略掉Text和Comment节点: 
    firstElementChild,lastElementChild; 
    children   => 数组类型:children[0] ,第一个子节点 
    nextElementSibling,previousElementSibling => 兄弟节点 
    parentElement => 父亲节点

  • 5. 挿入
  • Node有方法appendChild()和insertBefore()。 
    parent.appendChild(child); // 插入到最后 
    parent.insertBefore(newNode,node);//插入到node之前

以上がオリジナルJSで追加、削除、変更、確認、挿入を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。