querySelectorとquerySelectorのすべての違い.
1380 ワード
querySelectorは、検索Elementの最も速い1つだけを返します.
querySelector Allは、条件を満たすすべての要素を配列形式で返します.
サブアイテムを検索します.
EX)
.Classアクセス
#idアクセス
名前を入力するだけでTagNameにアクセス
要素の追加
2つのパラメータをinsertBeforeメソッドで挿入します.入れる値、入れる位置
EX) document.body.insertBefore(x, document.body.children[3])
要素のコピーと削除
コピー
ex)
ex)
querySelector Allは、条件を満たすすべての要素を配列形式で返します.
サブアイテムを検索します.
document.querySelectorAll(".list__item")[0].querySelectorAll(".list-sub__title")
このようにメソッドは、querySelector Allをサブタブとして繰り返し使用することでアクセスできます.EX)
var q = document.querySelectorAll(".list__item")[0].innerText
--------------------------------------
input: q
result: "소개 자바 스크립트 소개 매뉴얼 및 사양 코드 에디터 개발자 콘솔"
//줄바꿈은 가독성문제로 제거.
var q = document.querySelectorAll(".list__item")[0].querySelectorAll(".list-sub__title")
-------------------------------------
input: q
result: "코드 에디터"
特定の属性Calss TagName属性を検索します..Classアクセス
#idアクセス
名前を入力するだけでTagNameにアクセス
要素の追加
let x = document.createElement("hr")
document.body.appendChile(x)
맨밑에 hr라인 생성.
必要な場所へのElementの追加2つのパラメータをinsertBeforeメソッドで挿入します.入れる値、入れる位置
EX) document.body.insertBefore(x, document.body.children[3])
要素のコピーと削除
コピー
ex)
let x = hr.cloneNode();
document.body.insertBefore(x, document.body.children[4])
削除ex)
document.body.removeChile(x);
or
document.body.removeChile(document.body.children[3]);
Reference
この問題について(querySelectorとquerySelectorのすべての違い.), 我々は、より多くの情報をここで見つけました https://velog.io/@console/querySelector-과-querySelectorAll-차이점テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol