ホームページ > ウェブフロントエンド > jsチュートリアル > dom ノードでのネイティブ JavaScript 操作の概要

dom ノードでのネイティブ JavaScript 操作の概要

韦小宝
リリース: 2018-03-09 14:10:09
オリジナル
1910 人が閲覧しました

JavaScript プログラムを開発する場合、最も一般的に使用されるのは dom の操作です。今日は、JavaScript がどのように dom ノードを操作するのかを完全には理解していません。見て。

1. 要素ノードを取得します

単一の要素を取得します: document

.getElementById(); // 最初の要素を取得します

複数の要素を取得します。単一の要素を取得し、配列に相当する要素のコレクションを返します):

document.getElementsByTagName(); 
document.getElementsByName(); 
document.getElementsByClassName();// 动态,实时的 
document.querySelectorAll();// 查找速度比上面的块 //是静态的,非实时的,
ログイン後にコピー

要素、テキストを作成

document.createElement(“p”); 
document.createNode(“hello”) //创建文件节点。
ログイン後にコピー

ドキュメントに挿入

parentNode.appendChild(newNode), 
parentNode.insertBefore(newNode,positionNode);
ログイン後にコピー

属性操作

ele.setAttribute(name,value)//设置属性 
ele.getAttribute(name)//获取元素的属性 
ele.removeAttribute(name)//移除属性
ログイン後にコピー

ノードmove

ele.remove(),parentNode.removeChild(childNode)
ログイン後にコピー

子要素を置換

parentNode.replaceChild(newNode,oldNode)
ログイン後にコピー

要素をコピー

ele.cloneNode(boolean);// boolean为true, 深复制。
ログイン後にコピー

2. 子要素、親要素、兄弟要素を取得

ele.previousElementSibling;//上一个兄弟元素 
ele.parentNode;//父元素 
ele.children//子元素 
ele.nextElementSibling//下一个兄弟元素
ログイン後にコピー

ノード操作の詳細:

jQueryにおけるDOMノードの操作方法まとめ

以上がdom ノードでのネイティブ JavaScript 操作の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート