ホームページ > 記事 > ウェブフロントエンド > JS 内の要素を取得する N 通りの方法とその動的および静的なディスカッション
JS 内の要素を取得する N 通りの方法とその動的および静的なディスカッション
- jackloveオリジナル
- 2018-05-21 14:09:271404ブラウズ
JavaScriptを学習する過程で、jsの要素を取得する問題に遭遇します。この記事では、要素を取得する方法について説明します。
実際のフロントエンド開発作業では、要素のスタイルやコンテンツなどを更新するために特定の要素を取得する必要があることがよくあります。ドキュメント オブジェクト モデル (DOM) は、HTML および XML ドキュメントのプログラミング インターフェイスであり、ドキュメントの構造化された表現を提供し、プログラムから構造にアクセスする方法を定義します。これにより、ドキュメントとコンテンツの構造とスタイルが変更されます。 DOM は、ドキュメントをノードとオブジェクト (プロパティとメソッドを含むオブジェクト) の構造化されたコレクションに解析し、Web ページをスクリプトまたはプログラミング言語に接続します。したがって、JavaScript は DOM API を通じて要素ノードを取得できます。メソッドは次のとおりです: querySelector() と querySelectorAll() は ES5 要素選択メソッドです
1. getElementById():
パラメータ: 取得する要素の ID を受け取ります。 (大文字と小文字が区別され、厳密に一致する必要があります)、次の場合に Element オブジェクトを返します (コレクションには一致する要素が 1 つしか含まれていない点を除き、動的な NodeList コレクションとみなすこともできますが、リアルタイムで DOM ノードの変更も反映されます)。現在のドキュメント 特定の ID を持つ要素が存在しない場合は、nul が返されます。
構文:
element = document.getElementById(id);
例:
<body>
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(1)
var body=document.querySelector('body');
body.removeChild(div); console.log(body); //(2)
</script></body>
//(1)处打印值 <div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>//(2)处打印值<body>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(1)
var body=document.querySelector('body');
body.removeChild(div); console.log(body); //(2)
</script></body>を削除する例:
<!DOCTYPE html><html><head>
<title>getElementById example</title>
<script>
function changeColor(newColor) { var elem = document.getElementById("para1");
elem.style.color = newColor;
} </script></head><body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button></body></html>getElementById() メソッドは、ドキュメント内にない要素を検索しません。要素を作成して ID を割り当てた後、getElementById() を使用して以下を取得する前に、insertBefore() または他の同様のメソッドを使用して要素をドキュメントに挿入する必要があります:
var element = document.createElement("div");
element.id = 'testqq';var el = document.getElementById('testqq'); // el will be null!2 getElementsByClassName():
パラメーターを受け取ります。つまり、1 つ以上のクラス名 (スペースで区切られたクラス名) を含む文字列は、HTMLCollection 動的コレクションを返します (NodeList クラス配列オブジェクトを返すとも言えます)。コレクションには、ルート ノードとして現在の要素が含まれます。 、指定されたすべてのクラス名は子要素です。
構文:
var elements = document.getElementsByClassName(names); var elements = rootElement.getElementsByClassName(names);
getElementsByClassName は、ドキュメントだけでなく、任意の要素に対して呼び出すことができます。 このメソッドを呼び出す要素は、この検索のルート要素として使用されます。
例:
クラス 'test' のすべての要素を取得:
document.getElementsByClassName('test');
'red' と 'test' を含むクラスのすべての要素を取得:
document.getElementsByClassName( 'red test');
ID が「main」の要素の子ノードで、クラスが「test」のすべての要素を取得します:
document.getElementById('main').getElementsByClassName('test');例:
//html代码<div class="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
//js代码一 <script>
var div = document.getElementsByClassName("myDiv"); console.log(div); //(3)
var p = document.getElementsByClassName("myP"); for (var i = 0; i < p.length; i++) {
div[0].removeChild(p[i]);
} console.log(p); //(4)
</script>を削除します。//(3)の値を出力します[div.myDiv] //長さ1、innerHTMLがa94c063bc1661d92dd07e8b1741790f4hello dolby<の動的HTMLCollectionコレクション。 、a94c063bc1661d92dd07e8b1741790f4hello bean94b3e26ee717c64999d7867364b1b4a3、他の 2 つの p 要素がない理由については後で説明します。
//(4) の値を出力
[p.myP,p.myP] //長さ 2 の動的 HTMLCollection コレクションと innerHTML はそれぞれ「hello dolby」と「hello Bean」です。
ノードを削除する上記の方法では、getElementsByClassName メソッドが HTMLCollection 動的コレクションを返すことが確認されました。
その理由は、動的コレクション内の DOM 構造の変更が、保存されたオブジェクトに自動的に反映されるためです。最初は、i=0 の場合、ページ内の最初の p 要素は削除されます。 .length=3; i=1 の場合、残りの 3 つの p のインデックス 1 を持つ項目が削除され、i=2 の場合、i
それでは、配列のようなオブジェクト HTMLCollection 内の各項目を反復処理して、すべての項目を削除するにはどうすればよいでしょうか?
これも for ループで行われます⬇️、毎回オブジェクト コレクションの最後の項目を削除するだけです~
//js代码二 <script>
var div = document.getElementsByClassName("myDiv")[0]; console.log(div); //(5)
var p = document.getElementsByClassName("myP"); for (var i=p.length;i--;){
div.removeChild(p[i]);
} console.log(p); //(6)
</script>
//(5)处打印值<div class="myDiv"></div>//(6)处打印值[] //空的HTMLCollection集合，长度为03. getElementsByTagName():
構文:
elements = element.getElementsByTagName(tagName)
例:
// check the alignment on a number of cells in a table. var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
var status = cells[i].getAttribute("data-status");
if ( status == "open" ) {
// grab the data
}
}例: 削除<body>
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(7)
var p = document.getElementsByTagName("p");//以下for循环改为for (var i=0,len=p.length;i2ee6fa2fa74156e96d567d9f9ea39a0936cc49f0c466276486e50c850b7e4956
与getElementByClassName相同，返回动态集合，所以循环删除结果也相同
//(7)处打印值0bd60c3c81ecadce59a7dc90d0ee7fb616b28748ea4df4d9c2150843fecfba68//(8)处打印值[] //空的HTMLCollection集合，长度为0
4、getElementsByName()：
接收一个参数：带有给定name属性值的元素，返回一个动态NodeList类数组对象，对象中包含以当前元素为根节点，所有指定name属性值的子元素。最常用的场景是取得单选按钮。
示例：
<!DOCTYPE html><html lang="en"><head> ...</head><body>
<form name="up"><input type="text"></form><div name="down"><input type="text"></div>
<script>var up_forms = document.getElementsByName("up");console.log(up_forms[0].tagName); // returns "FORM"</script></body></html>示例：删除
<body>
<div id="myDiv">
<input type="radio" name="fav-color">red <input type="radio" name="fav-color">green <input type="radio" name="fav-color">blue </div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(9)
var ipt_favCol = document.getElementsByName("fav-color"); for (var i = ipt_favCol.length; i--;) {
div.removeChild(ipt_favCol[i]);
} console.log(ipt_favCol); //(10)
</script></body>getElementByName返回的是一个NodeList动态集合
//(9)处打印值0bd60c3c81ecadce59a7dc90d0ee7fb6"red""green""blue"16b28748ea4df4d9c2150843fecfba68//(10)处打印值[] //空的NodeList集合，长度为0
5、querySelector()：
接收一个参数：一个包含一个或多个CSS 选择器的字符串（多个选择器以逗号分隔），返回匹配指定CSS选择器的第一个元素节点（无法选中CSS伪元素），没有发现匹配的节点则返回null。
语法：
element = document.querySelector(selectors);
示例：一个强大的选择方式
<div class="user-panel main">
<input name="login"/> //这个标签将被返回</div><script>
var el = document.querySelector("div.user-panel.main input[name=login]");
</script>示例：如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义）：
<div id="foo\bar"></div><div id="foo:bar"></div><script> console.log('#foo\bar') // "#fooar" document.querySelector('#foo\bar') // 不匹配任何元素 console.log('#foo\\bar') // "#foo\bar" console.log('#foo\\\\bar') // "#foo\\bar" document.querySelector('#foo\\\\bar') // 匹配第一个div document.querySelector('#foo:bar') // 不匹配任何元素 document.querySelector('#foo\\:bar') // 匹配第二个div</script>
示例：删除
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(11)
var p = document.querySelector("p");
div.removeChild(p); console.log(p); //(12)
</script>//(11)处打印值 <div id="myDiv">
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>//(12)处打印值 <p class="myP">hello world</p> //如你所见，querySelector也是静态的快照6、querySelectorAll()：
接收一个参数：一个包含一个或多个CSS 选择器的字符串（多个选择器以逗号分隔），返回静态NodeList对象集合，该集合中包含匹配指定CSS选择器的所有节点，元素节点的变化无法实时反映在结果中；如果参数中包含CSS伪元素则返回一个空的对象集合。
语法：
elementList = document.querySelectorAll(selectors);
示例：
var matches = document.querySelectorAll("div.note, div.alert");
示例：删除
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(13)
var p = document.querySelectorAll("p"); for (var i = 0; i < p.length; i++) {
div.removeChild(p[i]);
} console.log(p); //(14)
</script>//(13)处打印值
0bd60c3c81ecadce59a7dc90d0ee7fb616b28748ea4df4d9c2150843fecfba68//(13)处打印值
[p.myP,p.myP,p.myP,p.myP] //返回的是静态NodeList集合，元素节点的变化无法实时反映在结果中
7、elementFromPoint()：
接收两个参数：分别是相对于当前窗口左上角的横纵坐标，单位为CSS像素，不需要加单位；返回位于页面指定位置的元素，如果该元素不可返回（如滚动条）则返回它的父元素，如果坐标值无意义（如负值）则返回null。
语法
var element = document.elementFromPoint(x, y);
示例：
<!DOCTYPE html><html lang="en"><head><title>elementFromPoint example</title><script>function changeColor(newColor) { elem = document.elementFromPoint(2, 2); elem.style.color = newColor;}</script>
</head><body>
<p id="para1">Some text here</p><button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button></body></html>这一个获取元素的方法用得不多所以不多做介绍。
是不是觉得看了上面这些头好大啊，什么是动态什么是静态，有没有好记一点的方法呢？
有哒！
你可以简单地理解为，getElementBy系列返回的都是动态的HTMLCollection集合，动态集合中的DOM结构变化能实时地反映到所保存的对象中，而querySelector系列返回的都是静态的NodeList对象，是一个快照，对DOM的任何操作都不会对其产生影响。
那么Nodelist和HTMLCollection有什么异同呢？
相同点：
二者都是类数组对象
二者都具有length属性
二者都具有item()方法
二者都是动态的元素集合，每次访问都需要重新对文档进行查询。
你一定会好奇，诶？前面不是说querySelector系列返回的都是静态的NodeList对象咩？怎么又变成动态的呢？原因在此：
规范中对 querySelectorAll 有明确要求，规定其必须返回一个静态的 NodeList 对象。
在Chrome中情况如下：
document.querySelectorAll('a').toString(); // return "[object NodeList]"document.getElementsByTagName('a').toString(); // return "[object HTMLCollection]"
不同点：
NodeList 对象会包含文档中的所有节点，如 Element、Text 和 Comment 等；HTMLCollection 对象只会包含文档中的 Element 节点
本篇对hs获取元素进行了详细的讲解，更多相关内容请关注php中文网。
相关推荐：
以上がJS 内の要素を取得する N 通りの方法とその動的および静的なディスカッションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。