JavaScript を使用した HTML DOM ノードの操作に関する基本チュートリアル

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript を使用した HTML DOM ノードの操作に関する基本チュートリアル_基礎知識

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:11 PM

domhtmljavascriptjsノード

DOM が存在するため、JavaScript を通じてノードを取得、作成、変更、削除することができます。
注: 以下に示す例の要素はすべて要素ノードです。
ノードを取得

父と子の関係

element.parentNode
element.firstChild/element.lastChild
element.childNodes/element.children

兄弟関係

element.previousSibling/element.nextSibling
element.previousElementSibling/element.nextElementSibling

ノード間の直接的な関係を通じてノードを取得すると、コードの保守性が大幅に低下します (ノード間の関係の変更はノードの取得に直接影響します)。しかし、この問題はインターフェースを通じて効果的に解決できます。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ELEMENT_NODE & TEXT_NODE</title>
</head>
<body>
 <ul id="ul">
 <li>First</li>
 <li>Second</li>
 <li>Third</li>
 <li>Fourth</li>
 </ul>
 <p>Hello</p>
 <script type="text/javascript">
 var ulNode = document.getElementsByTagName("ul")[0];
 console.log(ulNode.parentNode);    //<body></body>
 console.log(ulNode.previousElementSibling); //null
 console.log(ulNode.nextElementSibling);  //<p>Hello</p>
 console.log(ulNode.firstElementChild);  //<li>First</li>
 console.log(ulNode.lastElementChild);  //<li>Fourth</li>
 </script>
</body>
</html>

NTOE: 注意深い人なら、ノードトラバーサルの例では、body、ul、li、p ノードの間にスペースがないことがわかるでしょう。スペースがある場合、スペースは TEXT ノードとみなされます。そのため、ulNode.previousSibling を使用すると、

First

ノードの代わりに空のテキストノードが取得されます。つまり、ノードトラバーサルのいくつかの属性はすべてのノードタイプを取得しますが、要素トラバーサルは対応する要素ノードのみを取得します。通常の状況では、要素ノードの traversal 属性がより一般的に使用されます。
ブラウザ互換バージョンの element.children を実装します
一部の古いブラウザでは element.children メソッドがサポートされていませんが、次のメソッドを使用して互換性を実現できます。

<html lang>
<head>
 <meta charest="utf-8">
 <title>Compatible Children Method</title>
</head>
<body id="body">
 <div id="item">
 <div>123</div>
 <p>ppp</p>
 <h1 id="h">h1</h1>
 </div>
 <script type="text/javascript">
 function getElementChildren(e){
  if(e.children){
  return e.children;
  }else{
  /* compatible other browse */
  var i, len, children = [];
  var child = element.firstChild;
  if(child != element.lastChild){
   while(child != null){
   if(child.nodeType == 1){
    children.push(child);
   }
   child = child.nextSibling;
   }
  }else{
   children.push(child);
  }
  return children;
  }
 }
 /* Test method getElementChildren(e) */
 var item = document.getElementById("item");
 var children = getElementChildren(item);
 for(var i =0; i < children.length; i++){
  alert(children[i]);
 }
 </script>
</body>
</html>

注: この互換性メソッドは暫定版であり、互換性についてはテストされていません。
要素ノードを取得するインターフェース

getElementById
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll

2016311163518624.png (793×256)

getElementById

ドキュメント内の指定された ID を持つノードオブジェクトを取得します。

var element = document.getElementById('id');
getElementsByTagName

指定されたタグを持つ要素ノードのコレクションを動的に取得します (戻り値は DOM 変更の影響を受け、その値は変わります)。このインターフェイスは要素を通じて直接取得でき、ドキュメントに直接作用する必要はありません。

// 示例
var collection = element.getElementsByTagName('tagName');

// 获取指定元素的所有节点
var allNodes = document.getElementsByTagName('*');

// 获取所有 p 元素的节点
var elements = document.getElementsByTagName('p');
// 取出第一个 p 元素
var p = elements[0];

getElementsByClassName
指定された要素内の指定されたクラスを持つすべてのノードを取得します。複数のクラスオプションは、順序に関係なくスペースで区切ることができます。
var elements = element.getElementsByClassName('className');
注: IE9 以下は getElementsByClassName
をサポートしていません。対応可能なメソッド

function getElementsByClassName(root, className) {
 // 特性侦测
 if (root.getElementsByClassName) {
 // 优先使用 W3C 规范接口
 return root.getElementsByClassName(className);
 } else {
 // 获取所有后代节点
 var elements = root.getElementsByTagName('*');
 var result = [];
 var element = null;
 var classNameStr = null;
 var flag = null;

 className = className.split(' ');

 // 选择包含 class 的元素
 for (var i = 0, element; element = elements[i]; i++) {
  classNameStr = ' ' + element.getAttribute('class') + ' ';
  flag = true;
  for (var j = 0, name; name = className[j]; j++) {
  if (classNameStr.indexOf(' ' + name + ' ') === -1) {
   flag = false;
   break;
  }
  }
  if (flag) {
  result.push(element);
  }
 }
 return result;
 }
}

querySelector / querySelectorAll

受信した CSS セレクターに一致するリストの最初の要素またはすべての要素を取得します (返される結果は、後続の DOM 変更の影響を受けず、取得後に変更されません)。

var listElementNode = element.querySelector('selector');
var listElementsNodes = element.querySelectorAll('selector');

var sampleSingleNode = element.querySelector('#className');
var sampleAllNodes = element.querySelectorAll('#className');

注: IE9 は querySelector と querySelectorAll をサポートしていません
ノードの作成

ノードの作成 -> プロパティの設定 -> ノードの挿入

var element = document.createElement('tagName');

ノードの変更

textContent
ノードとその子孫ノードのテキストコンテンツを取得または設定します (ノード内のすべてのテキストコンテンツに対して)。

element.textContent; // 获取
element.textContent = 'New Content';

注: IE 9 以下はサポートされていません。
innerText (W3C 準拠ではありません)
ノードとその子孫のテキストコンテンツを取得または設定します。 textContent とほぼ同じように機能します。

element.innerText;

注: W3C 仕様に準拠しておらず、FireFox ブラウザはサポートされていません。
Firefox 互換性ソリューション

if (!('innerText' in document.body)) {
 HTMLElement.prototype.__defineGetter__('innerText', function(){
 return this.textContent;
 });
 HTMLElement.prototype.__defineSetter__('innerText', function(s) {
 return this.textContent = s;
 });
}

ノードの挿入

appendChild

指定された要素内に要素ノードを追加します。

var aChild = element.appendChild(aChild);

前に挿入

指定された要素の指定されたノードの前に指定された要素を挿入します。

var aChild = element.insertBefore(aChild, referenceChild);

ノードの削除

指定されたノードの子要素ノードを削除します。

var child = element.removeChild(child);

innerHTML

指定されたノード内のすべての HTML コンテンツを取得または設定します。以前のすべての内部コンテンツを置き換えて、完全に新しいノードのバッチを作成します (以前に追加されたイベントとスタイルを削除します)。 innerHTML はコンテンツをチェックせず、直接実行して元のコンテンツを置き換えます。
注: これは、新しいノードを作成する場合にのみ推奨されます。ユーザーの管理下では使用しないでください。

var elementsHTML = element.innerHTML;

存在的问题+

低版本 IE 存在内存泄露
安全问题（用户可以在名称中运行脚本代码）

PS: appendChild() , insertBefore()插入节点需注意的问题
使用appendChild()和insertBefore()插入节点都会返回给插入的节点，

//由于这两种方法操作的都是某个节点的子节点，所以必须现取得父节点，代码中 someNode 表示父节点 
//使用appendChild()方法插入节点 
var returnedNode = someNode.appendChild(newNode); 
alert(returnedNode == newNode) //true 
 
//使用insertBefore()方法插入节点 
var returnedNode = someNode.appendChild(newNode); 
alert(returnedNode == newNode) //true

值得注意的是，如果这两种方法插入的节点原本已经存在与文档树中，那么该节点将会被移动到新的位置，而不是被复制。

<div id="test"> 
 <div>adscasdjk</div> 
  <div id="a">adscasdjk</div> 
</div> 
<script type="text/javascript"> 
 var t = document.getElementById("test"); 
 var a = document.getElementById('a'); 
 //var tt = a.cloneNode(true); 
 t.appendChild(a); 
</script>

在这段代码中，页面输出的结果和没有Javascript时是一样的，元素并没有被复制，由于元素本来就在最后一个位置，所以就和没有操作一样。如果把id为test的元素的两个子元素点换位置，就可以在firbug中看到这两个div已经被调换了位置。
如果我们希望把id为a的元素复制一个，然后添加到文档中，那么必须使被复制的元素现脱离文档流。这样被添加复制的节点被添加到文档中之后就不会影响到文档流中原本的节点。即我们可以把复制的元素放到文档的任何地方，而不影响被复制的元素。下面使用了cloneNode()方法，实现节点的深度复制，使用这种方法复制的节点会脱离文档流。当然，我不建议使用这种方法复制具有id属性的元素。因为在文档中id值是唯一的。

<div id="test"> 
 <div>adscasdjk</div> 
  <div id="a">adscasdjk</div> 
</div> 
<script type="text/javascript"> 
 var t = document.getElementById("test"); 
 var a = document.getElementById('a'); 
 var tt = a.cloneNode(true); 
 t.appendChild(tt); 
</script>

相似的操作方法还有 removeNode(node)删除一个节点，并返回该节；replaceNode(newNode，node)替换node节点，并返回该节点。这两种方法相对来说更容易使用一些。

声明

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

es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。

javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。

foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、