JS에서 요소를 얻는 N 가지 방법과 동적 및 정적 토론
- jacklove원래의
- 2018-05-21 14:09:271406검색
JavaScript를 학습하는 과정에서 js가 요소를 가져오는 문제에 직면하게 됩니다. 이 글에서는 요소를 가져오는 방법을 설명합니다.
실제 프론트 엔드 개발 작업에서 요소의 스타일, 콘텐츠 등을 업데이트하기 위해 특정 요소를 얻어야 하는 경우가 종종 있습니다. DOM(문서 개체 모델)은 HTML 및 XML 문서를 위한 프로그래밍 인터페이스로, 문서의 구조화된 표현을 제공하고 프로그램에서 구조에 액세스하여 문서와 콘텐츠의 구조와 스타일을 변경하는 방법을 정의합니다. DOM은 문서를 노드와 개체(속성과 메서드가 포함된 개체)의 구조화된 컬렉션으로 구문 분석하여 웹 페이지를 스크립트나 프로그래밍 언어에 연결합니다. 따라서 JavaScript는 DOM API를 통해 요소 노드를 얻을 수 있습니다. querySelector() 및 querySelectorAll()은 ES5 요소 선택 방법
1입니다. getElementById():
파라미터를 받습니다: 가져올 요소 ID (대소문자 구분, 엄격하게 일치해야 함) 다음과 같은 경우 Element 객체를 반환합니다(컬렉션에 일치하는 요소가 하나만 포함되어 있다는 점을 제외하면 동적 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():
매개 변수를 받습니다. 즉, 하나 이상의 클래스 이름(공백으로 구분된 클래스 이름)을 포함하는 문자열은 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< , a94c063bc1661d92dd07e8b1741790f4hello bean94b3e26ee717c64999d7867364b1b4a3, 다른 두 개의 p 요소가 없는 이유는 나중에 설명하겠습니다.
//(4)의 값 인쇄
[p.myP,p.myP] //길이가 2인 동적 HTMLCollection 컬렉션과 innerHTML은 각각 "hello dolby" 및 "hello bean"입니다.
위의 노드 삭제 방법을 통해 getElementsByClassName 메서드가 HTMLCollection 동적 컬렉션을 반환하는 것을 확인했습니다.
이유는 동적 컬렉션의 DOM 구조 변경 사항이 저장된 객체에 자동으로 반영될 수 있기 때문입니다. 처음에는 p.legth=4일 때 페이지의 첫 번째 p 요소가 삭제됩니다. .length=3; i=1이면 나머지 3개 p에서 인덱스 1인 항목이 삭제되고, i=2이면 i191eee07018ea87382c00aa09516399d36cc49f0c466276486e50c850b7e4956
与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 중국어 웹사이트의 기타 관련 기사를 참조하세요!