jacascript DOM 노드―요소 노드,속성 노드,텍스트 노드
요소 노드 는 HTML 태그 요소 이 고 요소 노드 는 주로 요소 태그 이름,하위 노드 와 속성 에 대한 접근 을 제공 합 니 다.
요소 노드 의 세 가지 node 속성:nodeType:1,nodeName/TagName:요소 의 태그 이름 대문자,nodeValue:null;
부모 노드 parentNode 는 이 요소 노드 를 포함 하 는 요소 노드 Element 또는 문서 노드 문 서 를 가리킨다.
요소 의 childNodes 속성 에는 모든 하위 노드 가 포함 되 어 있 습 니 다.이 하위 노드 는 요소,텍스트,주석,처리 명령 노드 일 수 있 습 니 다.
childNodes 는 Node Type 과 결합 하여 몇 가지 요소 의 하위 노드 를 검사 할 수 있 습 니 다.
<ul class="list" id="list">
<li class="in"></li>
<li class="in"></li>
</ul>
<script>
var oList = document.getElementById('list');
var children = oList.childNodes;
var num = 0;
for(var i = 0; i < children.length; i++){
if(children[i].nodeType == 1){
num++;
}
}
console.log(num);//2 2
</script>
<div class="wrapper" id='test' for="nice" style="width:200px;height:100px;background:#f0f">123</div>
<script type="text/javascript">
var oTest = document.getElementById('test');
//IE6/IE7 hasAttribute
console.log(oTest.hasAttribute('class'));//true
console.log(oTest.hasAttribute('className'));//false
console.log(oTest.hasAttribute('id'));//true
console.log(oTest.hasAttribute('style'));//true
console.log(oTest.hasAttribute('for'));//true
console.log(oTest.hasAttribute('htmlFor'));//false
</script>
<script type="text/javascript">
var oTest = document.getElementById('test');
oTest.setAttribute('class','aaa'); //setAttribute class
oTest.setAttribute('className','bbb');
console.log(oTest.class);//undefined IE8
console.log(oTest.getAttribute('class'));//aaa getAttribute class
console.log(oTest.className);//aaa
console.log(oTest.getAttribute('className'));//bbb
oTest.setAttribute('style','border:1px solid red;height: 100px;'); //setAttribute style
console.log(oTest.style);// style ， ， ，
console.log(oTest.getAttribute('style'));
//border:1px solid red;height: 100px; getAttribute style
oTest.setAttribute('for','eee'); //setAttribute for
oTest.setAttribute('htmlFor','fff')
console.log(oTest.for);//undefined IE8
console.log(oTest.htmlFor);//undefined
console.log(oTest.getAttribute('for'));//eee getAttribute for
console.log(oTest.getAttribute('htmlFor'));//fff
console.log(oTest);
//<div class="aaa" id="test" for="eee" style="ddd" classname="bbb" htmlfor="fff">123</div>
</script>
<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
<script type="text/javascript">
var oTest = document.getElementById('test');
oTest.removeAttribute('class'); //removeAttribute class
oTest.removeAttribute('for');
oTest.removeAttribute('style');
console.log(oTest);// <div id="test">123</div>
</script>속성 노드,어떤 것 은 특성 노드 라 고 하 는데,차이 가 많 지 않다.
속성 노드 의 세 개의 node 속성,nodeType:2,nodeName/name:속성 이름,nodeValue/value:속성 값;
속성 노드 에 또 하나의 specified 속성 이 있 습 니 다.specified 는 불 값 입 니 다.특성 이 코드 에서 지정 한 것 인지,기본 적 인 것 인지 구별 합 니 다.이 속성의 값 이 true 라면 HTML 에 해당 하 는 특성 을 지정 하거나 setAttribute()방법 으로 이 속성 을 설정 한 것 을 의미 합 니 다.IE 에 서 는 설정 되 지 않 은 모든 특성의 이 속성 값 이 false 이 고,다른 브 라 우 저 에 서 는 설 정 된 모든 특성의 이 속성 값 이 true 이 며,설정 되 지 않 은 특성 입 니 다.지 정 된 속성 을 강하 게 설정 하면 오류 가 발생 합 니 다.
요소 노드 는 attributes 속성 이 있 습 니 다.NamedNodeMap 은 현재 요소 의 모든 속성 과 속성 값 을 포함 하고 NodeList 와 유사 하 며 동적 집합 입 니 다.요소 의 모든 속성 은 하나의 Attr 노드 에 의 해 표 시 됩 니 다.모든 노드 는 NamedNodeMap 대상 에 저 장 됩 니 다.각 노드 의 nodeName 은 속성의 이름 이 고 노드 의 nodeValue 는 속성의 값 입 니 다.
createAttribute(attr)에서 새로운 속성 노드 만 들 기;
attributes 속성 은 다음 과 같은 네 가지 방법 을 포함 합 니 다.
<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
<script type="text/javascript">
var oTest = document.getElementById('test');
console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4}
console.log(oTest.attributes.item(1).specified);//true
console.log(oTest.attributes.getNamedItem('id'));//id='test'
console.log(typeof oTest.attributes.getNamedItem('id'));//object
console.log(oTest.attributes.removeNamedItem('for'));//id='test'
console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, length: 3}
var abc = document.createAttribute("abc");
abc.nodeValue = "1234567";
oTest.attributes.setNamedItem(abc);
//obj.attributes.setNamedItem(attr) ， nodeValue ， setNamedItem
console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, 3: abc, length: 4}
console.log(oTest.attributes.item(1));//id='test'
console.log(oTest.attributes[1]);//id='test'
</script>
<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
<script type="text/javascript">
function outputAttributes(obj){
var arr = [],
attrName,
attrValue,
i;
for(i = 0; i < obj.attributes.length; i++){
attrName = obj.attributes[i].nodeName;
attrValue = obj.attributes[i].nodeValue;
arr.push(attrName + '=\"' + attrValue + '\"');
}
return arr.join(" ");
}
var oTest = document.getElementById('test');
console.log(oTest.attributes);//NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4}
console.log(typeof oTest.attributes);//object
console.log(outputAttributes(oTest));
//class="wrapper" id="test" for="nice" style="background:#f0f;height: 100px;"
console.log(typeof outputAttributes(oTest));//string
</script>텍스트 노드 의 세 개의 node 속성,nodeType:3,nodeName:'\#text',nodeValue:노드 에 포 함 된 텍스트,부모 노드 parentNode 는 이 텍스트 노드 를 포함 하 는 요소 노드 를 가리 키 며 텍스트 노드 에는 하위 노드 가 없습니다.
텍스트 노드 에 대해 가장 많은 호환성 문 제 는 공백 텍스트 노드 문제 입 니 다.IE8 및 이하 브 라 우 저 는 빈 텍스트 노드 를 식별 하지 않 고 다른 브 라 우 저 는 빈 텍스트 노드 를 식별 합 니 다.그래서 가끔 우 리 는 빈 텍스트 노드 를 정리 해 야 한다.
<div id="test">
<div>hello world!</div>
</div>
<script type="text/javascript">
var oTest = document.getElementById('test');
//
console.log(oTest.firstChild);//" "
console.log(oTest.lastChild);//" "
console.log(oTest.childNodes);//[text, div, text]
// [text, div, text]，text
//IE8 [div]，
console.log(oTest.childNodes.length); //3
// 3
//IE8 1，
//
function cleanWhitespace(oEelement){
for(var i = 0; i < oEelement.childNodes.length; i++){
var node = oEelement.childNodes[i];
if(node.nodeType == 3 && !/\S/.test(node.nodeValue)){
node.parentNode.removeChild(node);
}
}
}
cleanWhitespace(oTest);
console.log(oTest.childNodes);//[div]
console.log(oTest.childNodes.length); //1
</script>
<div id="testData">hello world!</div>
<div id="testWholeText">hello world!</div>
<script type="text/javascript">
var oTestData = document.getElementById('testData');
//
console.log(oTestData.firstChild);//"hello world!"
console.log(typeof oTestData.firstChild);//object
console.log(oTestData.childNodes.length); //1
console.log(oTestData.firstChild.nodeValue);//"hello world!"
console.log(typeof oTestData.firstChild.nodeValue);//string
console.log(oTestData.firstChild.data);//"hello world!"
// data nodeValue , string
console.log(oTestData.firstChild.data === oTestData.firstChild.nodeValue);//true
var oTestWholeText = document.getElementById('testWholeText');
console.log(oTestWholeText.childNodes); //[text]
console.log(oTestWholeText.childNodes.length); //1
console.log(oTestWholeText.firstChild.wholeText);//hello world!
console.log(oTestWholeText.firstChild.data);//hello world!
oTestWholeText.firstChild.splitText('or');
console.log(oTestWholeText.childNodes); //[text, text]
console.log(oTestWholeText.childNodes.length); //2
console.log(oTestWholeText.firstChild);//#text
console.log(oTestWholeText.firstChild.wholeText);//hello world!
//wholeText Text Text ， 。
console.log(oTestData.firstChild.length);//12
console.log(oTestData.firstChild.nodeValue.length);//12
console.log(oTestData.firstChild.data.length);//12
</script>텍스트 노드 의 조작 은 문자열 의 조작 방법 과 상당히 유사 하 다.일반적으로,우 리 는 텍스트 를 가 져 오 는 데 innerHTML 을 사용 한 다음 문자열 을 제거 하 는 조작 방법 을 사용한다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
