Elementtyp im DOM: (alle folgenden Attribute sind nur schreibgeschützte Attribute)
1. node.nodeType Gibt den Knoten des angegebenen Knotens zurück als numerischer Werttyp.
Es gibt 12 verschiedene Knotentypen, die untergeordnete Knoten unterschiedlicher Knotentypen haben können (die ersten drei sind wichtig):
if(ul .nodeType == Node.ELEMENT_NODE){
warning('Knoten ist ein Element');
}
Der obige Code kann unter Standardbrowsern normal ausgeführt werden, jedoch nicht unter nicht standardmäßigen Browsern (unter ie8).
Lösung:
if(ul.nodeType ==1){ warning(‘Node is an element’); } Verwenden Sie das nodeType-Attribut zum Vergleich mit Zahlen.
2. Der nodeName-Wert ist der Tag-Name des Elementtyps, z. B. ul, p usw.
nodeValue ist null.
ParentNode kann ein Dokument oder Element sein, und untergeordnete Knoten können es sein. Element, Text, Kommentar, Verarbeitungsanweisung, CDATASection, EntityReference.
1. Eigenschaften über HTML-Elementattribute erhalten
Alle HTML-Elemente übergeben den HTMLElement-Typ oder seine Untertypen (HTMLDivElement, HTMLImageElement). dass der HTMLElement-Typ vom Element-Typ erbt, aber auch einige eindeutige Attribute hinzufügt. Der Untertyp verfügt beispielsweise über eindeutige Attribute wie src und title. Ein besonderer Hinweis ist, dass className verwendet werden muss, um den Wert der Klasse zu erhalten, da class ein Schlüsselwort in js ist.
Die Erfassungs- und Einstellungsmethoden sowie die zu beachtenden Stellen werden im Vergleich in 2 und 3 beschrieben.
2. element.getAttribute(attributename) gibt den Attributwert des angegebenen Attributnamens zurück.
Diese Methode übergibt eine Zeichenfolge von Attributnamen, bei der die Groß-/Kleinschreibung nicht berücksichtigt wird.
Zum Beispiel ul.getAttribute(‘class’); Da der Parameter eine Zeichenfolge ist, können Sie class anstelle von className verwenden. Benutzerdefinierte Attribute können über diese Methode abgerufen werden. Bei einigen Attributnamen, die Zeichen enthalten, die in Nicht-Schlüsselwörtern verwendet werden, ist es besonders praktisch, diese Methode zu verwenden, um den Wert des Attributs abzurufen. In der HTML5-Spezifikation sollten benutzerdefinierte Attribute verwendet werden Wenn es das unzulässige Zeichen „-“ enthält, können Sie es mit dem Präfix „data-“ abrufen.
Insbesondere wenn der Attributname „Style“ ist, gibt diese Methode in Versionen vor IE7 ein Objekt zurück, während andere Versionen von Browsern CSS-Text zurückgeben. Wenn „attributname“ ein Ereignishandler wie „onclick“ ist, gibt diese Methode in Versionen vor IE7 eine Methode oder null zurück, und andere Browserversionen geben eine Funktionscodezeichenfolge zurück.
Das Abrufen von Attributen über HTML-Elementattribute unterscheidet sich erheblich von getAttribute().
1. Unterschiede beim Zugriff auf benutzerdefinierte Attribute:
Beim Parsen von HTML-Code fügen Standardbrowser die benutzerdefinierten Attribute von Elementen nicht über Attribute in js hinzu. Das Ergebnis ist undefiniert. Nicht standardmäßige Browser fügen dieses benutzerdefinierte Attribut zum DOM-Objekt hinzu und auf das Ergebnis wird in js zugegriffen.
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="ul1" index="hehe"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul> <script type="text/javascript"> var ul = document.getElementById('ul1');
alert(ul.id); /*标准与非标准都是div1*/
alert(ul.index);/*标准为undefined 非标准为hehe*/ </script> </body></html>1234567891011121314151617181920212. Wenn es sich bei dem Attribut um einen Stil handelt, wird ein Objekt zurückgegeben. Wenn es sich bei dem Attribut um eine Ereignisbehandlung handelt, wird die kopierte Funktion zurückgegeben.
Zusammenfassend lässt sich sagen, dass beim Bearbeiten von DOM-Objektattributen im Allgemeinen HTML-Elementattribute zum Abrufen von Attributen verwendet werden. Nur wenn der Wert von benutzerdefinierten Attributen und einigen Attributnamen erhalten wird, die unzulässige Zeichen enthalten. Bei Verwendung der getAttribute-Methode.
.
3. element.setAttribute(attributename, attributevalue) fügt das angegebene Attribut hinzu und weist ihm den angegebenen Wert zu.
Verglichen mit der Methode zum Festlegen von Attributen über HTML-Elementattribute kann diese Methode einige nicht verfügbare benutzerdefinierte Attribute hinzufügen und Werte zuweisen, die über HTML-Elementattribute festgelegten Attribute werden jedoch nicht festgelegt. Gleichzeitig weist diese Methode in Versionen vor IE7 auch Ausnahmen auf. Daher gibt es neben dem Festlegen benutzerdefinierter Attribute auch andere Möglichkeiten, Eigenschaften über HTML-Elementattribute festzulegen.
4. RemoveAttribute() entfernt Attribute, wird jedoch nicht häufig verwendet. Versionen vor IE6 unterstützen diese Methode nicht.
1. childNodes: stellt eine Sammlung untergeordneter Knoten eines Elements dar und gibt ein NodeList-Objekt zurück.
Unter Standardbrowsern: Die zurückgegebenen untergeordneten Knoten umfassen Texttyp, Elementtyp, Kommentartyp usw., insbesondere leeren Text im Texttyp, der sogenannte Zeilenumbruch.
In nicht standardmäßigen Browsern: Die zurückgegebenen untergeordneten Knoten enthalten keinen Texttyp-Hohltext und hängen auch mit der Knotenposition, der Analysemethode usw. zusammen.
<ul id="ul1"> <li>22222</li>
111111 <!--33333--></ul><script type="text/javascript"> var oul = document.getElementById('ul1');
alert(oul.childNodes.length);</script>在标准浏览器下：得到的结果为5（li元素前的换行空文本，li元素，注释到</li>之间这一段文本，注释，注释到</ul>的空白） 在非标准的浏览器下得到的结果为1 但是将<li>22222</li> 111111互换位置之后得到的结果为2.1234567891011所以当运行下面代码的时候为出问题：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> </head> <body> <ul id="ul1"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul> <script type="text/javascript"> var oul = document.getElementById('ul1'); for(var i = 0; i<oul.childNodes.length; i++){
oul.childNodes[i].style.backgroundColor = 'red';
} /*标准： Cannot set property 'backgroundColor' of undefined*/ /*非标准：（ie8之前）正常*/
</script> </body></html>原因很简单，就是因为在标准浏览器下childNodes返回的子节点中包含非元素类型的节点。12345678910111213141516171819202122232425 Möglichkeiten zur Lösung des oben genannten Problems:
Bestimmen Sie mithilfe des nodeType-Attributs, ob der untergeordnete Knoten ein Elementtyp ist:
for(var i = 0; i<oul.childNodes.length; i++){
if(oul.childNodes[i].nodeType === 1)
oul.childNodes[i].style.backgroundColor = 'red';
}1234In illegal verschachtelten HTML-Dokumenten Aufgrund der unterschiedlichen Analysemethoden sind die in Standard- und Nicht-Standard-Browsern angezeigten Ergebnisse unterschiedlich. Dies hängt vollständig mit der Analysemethode des Browserkernels zusammen. Zum Beispiel:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <ul id="ul1"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> <p>5555555</p> </ul> <script type="text/javascript"> var oul = document.getElementById('ul1'); for(var i = 0; i<oul.childNodes.length; i++){ if(oul.childNodes[i].nodeType === 1)
oul.childNodes[i].style.backgroundColor = 'red';
} </script> </body> </html>1234567891011121314151617181920212223对于一些分标准的浏览器比如ie7 解析的时候他会把这种那个不符合语义的p元素放到最后一个li中，但对于其他的浏览器并不会这样。换句话说，在标准浏览器下p是ul的子节点，但是在非标准的浏览器下p是最后一个li的子节点，这完全和浏览器内核的系欸小方式有关。
由此可以看出，对于在书写html文档的时候，结构化语义是多么的重要，至少能为添加js方便不少。
二、element.childern仅仅返回元素类型的子节点集合，返回NodeList 对象。
Children比childNodes要好得多，因为他仅仅获取那些为元素类型的子节点。但是还是不能免于非法嵌套带来的问题，这本身至于浏览器的近稀饭时有关，与用那种属性没有关系。
三、element.firstChild（firstElementChild）：获取第一个子点
element.lastChild（lastElementChild）：获取最后一个子节点
element.nextSibling（nextElementSibling）：获取相邻的下一个兄弟子节点
element.previousSibling（previousElementSibling）：获取相邻的上一个兄弟节点
以firstChild为例说明一下性质，其他的大同小异。
在标准情况下：返回的结果可能是文本类型（空文本）。
在非标准的情况下：如果有元素子节点，那么一定返回第一个元素类型的子节点。
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /></head><body> <ul id="ul1"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul> <script type="text/javascript"> var oul = document.getElementById('ul1');
alert(oul.firstChild.nodeName); /*标准下text非标准为li*/ </script></body></html>123456789101112131415161718192021解决这种情况
1是firstElementChild。
firstElementChild仅仅是在标准浏览器下有效，在非标准的浏览器下是没有定义的。在标准浏览器下仅仅返回第一个元素类型的子节点，如果没有返回null。
再js中加入：
function firstChild(obj){ if(obj.firstElementChild === undefined){//检测是否为标准浏览器 return obj.firstChild;//不是标准浏览器，用firstChild返回第一个元素子节点，可能为null
}else{ return obj.firstElementChild;//是标准浏览器，用firstElementChild返回第一个元素子节点，可能为null
}
} var oFirst = firstChild(oul); if(oFirst){//判断有没有第一个元素子节点排除空节点的情况
oFirst.style.backgroundColor = 'orange';
}else{
alert('没有第一个元素');
}1234567891011121314152直接用children：推荐
if(oul.children[0]){
oul.children[0].style.backgroundColor = 'orange';
}else{
alert('没有第一个元素');
}123456四、element.parentNode： 当前节点的父级节点，无兼容性问题。
Eg：点击隐藏将这个列表隐藏<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>window.onload = function() { var aA = document.getElementsByTagName('a'); for (var i=0; i<aA.length; i++) {
aA[i].onclick = function() { this.parentNode.style.display = 'none';
}
}
}</script></head><body> <ul id="ul1"> <li>11111 <a href="javascript:;">隐藏</a></li> <li>22222 <a href="javascript:;">隐藏</a></li> <li>33333 <a href="javascript:;">隐藏</a></li> <li>44444 <a href="javascript:;">隐藏</a></li> </ul></body></html>123456789101112131415161718192021222324252627五、element.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点
非ie7以下的浏览器：
如果没有定位父级 offsetParent 为body
如果有定位父级 offsetParent 为定位父级
Ie7以下的浏览器：
如果没有定位父级 自身没有定位 offsetParent 为body，自身有定位的话 为html
如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上。
如果有定位父级 offsetParent 为定位父级
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>div {padding: 40px 50px;}#div1 {background: red;}#div2 {background: green; zoom: 1;position: relative;}#div3 {background: orange;}</style><script>window.onload = function() { var oDiv3 = document.getElementById('div3');
alert( oDiv3.offsetParent.id );
}</script></head><body id="body1"> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div></body></html>1234567891011121314151617181920212223242526272829Div2 zoom：1；属性触发layout，并且div3没有定位，所以在ie7一下的版本父元素div2，同时，div2相对定位，在其他浏览器中父元素为div2。解决了兼容性问题。
六、element.offsetLeft[Top] : 只读 属性
当前元素到定位父级的距离（偏移值）（或者说，到当前元素的offsetParent的距离）
非ie7以下的浏览器：
如果没有定位父级 offsetLeft [top]是到html的距离。
如果有定位父级 是到定位父级的距离。
ie7以下：
如果自己没有定位，无论是否有没有父级定位offsetLeft[Top]是到body的距离
如果自己有定位，那么就是到定位父级的距离（没有父级定位情况下是到html的距离）。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>div {padding: 40px 50px;}#div1 {background: red;}#div2 {background: green; position: relative;}#div3 {background: orange; position: relative;}</style><script>window.onload = function() { var oDiv3 = document.getElementById('div3');
alert( oDiv3.offsetTop );
}</script></head><body id="body1"> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div></body></html>123456789101112131415161718192021222324252627例子：获得任意一个元素的相对
于页面的位置<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style type="text/css"> body{padding:0; margin:0;} /*由于offsetLeft和offsetParsent在没有定位父级的时候父级不同*/ div{padding: 40px 50px;} #div1{background-color: #008000;} #div2{background-color: #FF0000;position: relative;} #div3{background-color: #FFA500;position:relative;} /*设置position offsetLeft在字节没有定位的时候是相对body的*/ </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3">
</div> </div> </div> <script type="text/javascript"> var oDiv = document.getElementById('div3'); function getPosition(obj){ var pos = {left:0, top:0}; while(obj){
pos.left += obj.offsetLeft;
pos.top +=obj.offsetTop;
obj = obj.offsetParent;
} return pos;
}
alert(getPosition(oDiv).left); </script> </body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546七、长高：
element.style.width : 样式宽 = width
element.clientWidth : 可视区宽 = width + padding
element.offsetWidth: 占位宽 = width + padding + border
八、
node.appendChild(node)
node.insertBefore(newnode,existingnode)
node.removeChild(node)
node.replaceChild(newnode,oldnode) node为oldnode的父节点
这几个函数既能操作已有的节点，也能操作动态创建的节点（createElement（））
node.insertBefore(newnode,existingnode)当existingnode当null时在ie下会报错解决的方式就是：用if判断如果为null执行什么操作，否则执行什么操作。
简单的留言板：<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <input type="text" name="text" id="text" /> <input type="button" name="btn" id="btn" value="添加" /> <ul id="ul1"> </ul> <script type="text/javascript"> var text = document.getElementById('text'); var btn = document.getElementById('btn'); var oul = document.getElementById('ul1');
btn.onclick =function(){ var li = document.createElement('li');
li.innerHTML = text.value; var oa = document.createElement('a');
oa.innerHTML = '删除';
oa.href = 'javascript:;';
oa.onclick = function(){
oul.removeChild(this.parentNode);
}
li.appendChild(oa); if(!oul.children[0]){
oul.appendChild(li);
}else{
oul.insertBefore(li,oul.children[0]);
} if(oul.children.length>5){
oul.removeChild(oul.children[oul.children.length-1])
}
} </script></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der DOM-Attributmethoden und Kompatibilitätsprobleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Browser-Kompatibilität
Das heißt, die Verknüpfung kann nicht gelöscht werden
So lösen Sie das Problem, dass die IE-Verknüpfung nicht gelöscht werden kann
Welche Plattform ist Lazada?
Verwendung der TimestampDiff-Funktion
So posten Sie Text in WeChat Moments
Was bedeutet Harmonios?
Plugin.exe-Anwendungsfehler
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
