js 에서 Dom 작업 의 개인 총화
원소 가 져 오기
querySelector
의 성능 은 get 시리즈 보다 높 을 것 이다. nodeList 의 스냅 샷 을 되 돌려 주기 때문이다.querySelector
스냅 샷 을 얻 었 기 때문에 요소 가 업 데 이 트 될 때 얻 은 스냅 샷 은 업데이트 되 지 않 습 니 다.querySelector
시 리 즈 는 정적 이 고 get
시 리 즈 는 동적 이다.document.getElementById('mybtn')
document 만 있다 document.querySelector('.mybtn') ///
document.querySelectorAll('.mybtn') //
document.getElementsByClassName('mybtn') // className mybtn
document.getElementsByTagName('div')
document.getElementById('mybtn')
document.getElementByName('mybtn') // name ( id label for 。)
document.getElementByTagName('*') //
자신 이 알 고 있 는 demo 를 옮 겨 싣 고,
Demo 2 의 lis 는 동적 인 Node List 이기 때문에 매번 lis 를 호출 할 때마다 문 서 를 다시 조회 하여 무한 순환 문 제 를 초래 합 니 다.한편, Demo 1 의 lis 는 정적 인 Node List 로 li 집합 스냅 샷 으로 문서 의 어떠한 조작 에 도 영향 을 주지 않 습 니 다.
작성 자: 간 생 링크:https://www.zhihu.com/question/24702250/answer/28695133 출처: 저작권 은 작가 의 소유 임 을 알 고 있 습 니 다.상업 전 재 는 작가 에 게 연락 하여 권한 을 수 여 받 으 십시오. 비 상업 전 재 는 출처 를 밝 혀 주 십시오.
// Demo 1
var ul = document.querySelectorAll('ul')[0],
lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
// Demo 2
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
:
:https://www.zhihu.com/question/24702250/answer/28695133
:
。 , 。
classList
element.classList.add
클래스 증가 element.classList.remove
class 삭제 element.classList.containes
class 를 포함 하 는 지, true 또는 false element.classList.toggle
클래스 전환 div.classList.replace("foo", "bar");
클래스 교체 ele.className = 'foo goo do '
ele 의 class 를 설정 하고 이 속성 으로 ele 의 class let elm = document.getElementById('item');
if(elm.className === 'active'){
elm.className = 'inactive';
} else {
elm.className = 'active';
}
4 사용자 정의 데이터 속성
data-set
, 사용자 정의 속성 을 얻 는 방법, ele. dataset. name // ele.dataset.name ele.dataset.myCustomKey ele.dataset.id // ele.dataset.name = ‘katherine’ ele.dataset.myCustomKey = ‘new value’ ele.dataset.id = 'newID'
五 获取dom元素的属性的方法,获取某一个属性atrr的方法有哪些呢?
- ele.attr 设置获取获取元素的属性,但是不能设置或者获取自定义属性
-
getAttribute(attr) setAttribute(attr,'new'),
的方法获取或者设置属性
这两种方法的比较和对比
- ele.attr 不能设置或者获取自定义属性,使用getAttribute相关方法则可以设置或者获取自定义属性。
- 当使用ele.style 得到的是一个style的对象值,所以可以通过
ele.style.color
获得某一个样式的值;而使用getAttribute 相关方法获取的style是字符串。 - 使用ele.attri获取class的时候,是使用ele.className.而使用getAttribute方法的时候,是直接使用ele.getAttribute('class')
var Odiv = document.getElementById('myDiv'); // Odiv.id //myDiv Odiv.className // test // Odiv.getAttribute('id') // myDiv Odiv.getAttribute('class') .. //test Odiv.getAttribute('data-name') // myDiv
六 使用ele.tagName的时候要注意
- 使用ele.tagName会返回该元素的标签名,但是要比较的话,最好是用ele.tagName.toLowerCase === 'div'去比较和使用最好。
七 节点与元素节点
传统的获取不同的节点的方法有如下
- ele.childNodes // 返回某一个元素的所有子节点,包括文本节点
- ele.previousSibling // 返回同级的前面的兄弟元素
- ele.nextSibling // 返回同级的后面的兄弟元素
- ele.firstChild // 返回第一个子元素
- ele.lastChild //返回最后一个子元素
新的不包含文本节点的获取元素节点的方法,不包含空元素节点和文本节点
- ele.childElementCount // 返回某一个元素的所有子节点的个数
- ele.previousElementSibling // 返回同级的前面的兄弟元素
- ele.nextElementSibling // 返回同级的后面的兄弟元素
- ele.firstElementChild // 返回第一个子元素
- ele.lastElementChild //返回最后一个子元素
七 设置和获取 innerHTML innerText
相比于创建节点,再将节点append或者穿插到某一个节点处,innerHTML还是比较高效率的。
- 当设置了一个元素的innerHTML和innerText之后,之前的内部元素都会被清除,重新覆盖。
- 使用
innerHTML
的时候,要注意尽量减少使用的次数,因为频繁使用innerHTML会造成性能问题。
下面的例子就是,尽量少用innerHTML
for (var i = 0; i < length; i++) {
ul.innerHTML += "" + values[i] + " ";
}
//
var newHtml = ''
for (var i = 0; i < length; i++) {
newHtml += "" + values[i] + " ";
}
ul.innerHTML = newHtml;
8. 노드 를 만 들 고 삽입 하 는 방법.
✔메모:
appendChild
을 사용 할 때 삽 입 된 요소 가 문서 의 노드 라면 이 문서 의 노드 는 원래 의 위치 에서 새로운 위치 로 이동 합 니 다. 즉, 문서 의 모든 노드 가 두 위치 에 동시에 나타 나 지 못 합 니 다.document.createElement('div') // div 。
father.appendChild(newNode) // father new
father.insertBefore(newNode,father.firstChild) // newnode father
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.