DOM 属性メソッドと互換性の問題の詳細な説明
DOMの要素タイプ：（以下の属性はすべて読み取り専用属性です）
1.node.nodeType 指定されたノードのノードタイプを数値で返します。
12 の異なるノード タイプがあり、その中には異なるノード タイプの子ノードが存在する場合があります (最初の 3 つが重要です): 
if(ul.nodeType == Node.ELEMENT_NODE){
alert('ノードは要素です');
}
上記のコードは標準ブラウザでは正常に実行できますが、非標準ブラウザ (ie8 環境) では正常に実行できません。
解決策:
if(ul.nodeType ==1){alert(‘ノードは要素です’) } 数値と比較するには、nodeType 属性を使用します。
nodeValue 値が null です。
ParentNode はドキュメントまたは要素の場合があり、子ノードはドキュメントまたは要素の場合があります。要素、テキスト、コメント、処理命令、CDATAセクション、エンティティ参照。
1. HTML 要素の属性を通じて機能を取得するすべての HTML 要素は、HTMLElement タイプまたはそのサブタイプ (HTMLDivElement、HTMLImageElement) によって表されますが、さらにいくつかの機能が追加されます。独自の属性。Cut サブタイプにも独自の属性とメソッドがあります。たとえば、img には src や title などの独自の属性があります。特に注意すべき点は、class は js のキーワードであるため、className を使用して class の値を取得する必要があることです。 入手・設定方法と注意点を2と3で比較しながら記載しています。
2. element.getAttribute(attributename) は、指定された属性名の属性値を返します。このメソッドは、大文字と小文字を区別しない属性名の文字列を渡します。
たとえば、ul.getAttribute(‘class’); パラメーターは文字列であるため、className の代わりに class を使用できます。カスタム属性は、キーワード以外で使用される文字を含む一部の属性名で、属性の値を取得するために特に便利です。たとえば、HTML5 仕様では、カスタム属性は次のようになります。先頭に data- 接頭辞が付きます。不正な文字「-」が含まれている場合は、ul.getAttribute('data-index'); を使用して取得できます。
1. カスタム属性へのアクセスの違い:
HTML コードを解析する場合、標準のブラウザーは要素のカスタム属性を DOM オブジェクトに追加しません。非標準のブラウザーでは、結果は未定義です。このカスタム属性を DOM オブジェクトに追加し、結果は js でアクセスされます。
<!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>123456789101112131415161718192021要約すると、DOM オブジェクトの属性を操作するときは、通常、カスタム属性の値と、不正な文字を含む一部の属性名の値を取得する場合にのみ getAttribute を使用して属性を取得します。.
3. element.setAttribute(attributename,attributevalue) は、指定された属性を追加し、指定された値を割り当てます。HTML要素の属性を通じて属性を設定する方法と比較して、この方法では利用できないカスタム属性を追加して値を割り当てることができますが、HTML要素の属性を通じて設定された属性は設定されません。同時に、このメソッドには IE7 より前のバージョンにも例外があるため、カスタム属性の設定に加えて、HTML 要素の属性を通じてプロパティを設定する他の方法もあります。
4. RemoveAttribute() は属性を削除しますが、IE6 より前のバージョンではこのメソッドはサポートされていません。操作内容
1. childNodes: 特定の要素の子ノードのコレクションを表し、NodeList オブジェクトを返します。標準ブラウザの場合: 返される子ノードには、テキスト タイプ、要素タイプ、コメント タイプなどが含まれ、特にテキスト タイプの空のテキスト、いわゆる改行が含まれます。
標準以外のブラウザの場合: 返される子ノードにはテキスト タイプの中空テキストは含まれず、ノードの位置、解析方法などにも関連します。
<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返回的子节点中包含非元素类型的节点。12345678910111213141516171819202122232425nodeType 属性を使用して、子ノードが要素タイプであるかどうかを判断します:
for(var i = 0; i<oul.childNodes.length; i++){
if(oul.childNodes[i].nodeType === 1)
oul.childNodes[i].style.backgroundColor = 'red';
}1234<!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>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748以上がDOM 属性メソッドと互換性の問題の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7700
15
1640
14
1393
52
1287
25
1230
29
Bluetooth 5.3 と 5.2 バージョンの比較と差異分析
Dec 28, 2023 pm 06:08 PM
現在、多くの携帯電話が Bluetooth バージョン 5.3 をサポートしていると主張していますが、Bluetooth 5.3 と 5.2 の違いは何ですか? 実際、これらは基本的に Bluetooth 5 のその後の更新バージョンであり、ほとんどの性能と機能に大きな違いはありません。 Bluetooth 5.3 と 5.2 の違い: 1. データ レート 1 と 5.3 は、最大 2Mbps のより高いデータ レートをサポートできます。 2. 5.2 は最大 1Mbps しか到達できませんが、5.3 はより高速かつ安定してデータを送信できることを意味します。 2. 暗号化制御の強化 2. Bluetooth 5.3 では、暗号化キーの長さの制御オプションが向上し、セキュリティが向上し、アクセス制御やその他のデバイスへの接続が向上します。 3. 同時に、管理者の制御がよりシンプルになるため、5.2 では不可能だった接続がより便利かつ高速になります。
i7-7700 が Windows 11 にアップグレードできない場合の解決策
Dec 26, 2023 pm 06:52 PM
i77700 のパフォーマンスは win11 を実行するのに完全に十分ですが、ユーザーは i77700 を win11 にアップグレードできないことがわかります。これは主に Microsoft によって課された制限が原因であるため、この制限をスキップする限りインストールできます。 i77700 は win11 にアップグレードできません: 1. Microsoft が CPU バージョンを制限しているためです。 2. win11 に直接アップグレードできるのは、Intel の第 8 世代以降のバージョンのみです 3. i77700 は第 7 世代として、win11 のアップグレードのニーズを満たすことができません。 4. ただし、i77700はパフォーマンス的にはwin11を快適に使用するのに完全に可能です。 5. したがって、このサイトの win11 直接インストール システムを使用できます。 6. ダウンロードが完了したら、ファイルを右クリックして「ロード」します。 7. ダブルクリックして「ワンクリック」を実行します。
ブラウザの互換性
Sep 14, 2023 am 11:08 AM
ブラウザ互換性を設定する方法には、適切な HTML および CSS 標準の選択、CSS プレフィックスとリセットの使用、ブラウザ互換性プレフィックス ライブラリの使用、ブラウザ機能の検出、ブラウザ互換性ツールの使用、およびクロスブラウザ テストの実施が含まれます。詳細な導入: 1. 適切な HTML および CSS 標準を選択します。HTML および CSS コードを作成するときは、W3C 標準に従うようにしてください。ブラウザによってサポートされる標準は異なりますが、標準に従うことで互換性を最大限に高めることができます。性別、2. CSS プレフィックスを使用する、など。
Go 言語は Linux システム上でどの程度互換性がありますか?
Mar 22, 2024 am 10:36 AM
Go 言語は Linux システムとの互換性が非常に優れており、さまざまな Linux ディストリビューション上でシームレスに実行でき、さまざまなアーキテクチャのプロセッサをサポートします。この記事では、Linux システムにおける Go 言語の互換性を紹介し、具体的なコード例を通じてその強力な適用性を示します。 1. Go 言語環境をインストールする Linux システムへの Go 言語環境のインストールは非常に簡単で、対応する Go バイナリ パッケージをダウンロードし、関連する環境変数を設定するだけです。 Ubuntu システムに Go 言語をインストールする手順は次のとおりです。
win11でie11ブラウザが使えない場合はどうすればいいですか？ (win11ではIEブラウザは使用できません)
Feb 10, 2024 am 10:30 AM
ますます多くのユーザーが win11 システムにアップグレードし始めています。各ユーザーの使用習慣が異なるため、多くのユーザーは依然として ie11 ブラウザーを使用しています。では、win11 システムで ie ブラウザーを使用できない場合はどうすればよいでしょうか? Windows11はIE11をまだサポートしていますか？解決策を見てみましょう。 win11でie11ブラウザが使えない問題の解決策 1. まず、スタートメニューを右クリックし、「コマンドプロンプト（管理者）」を選択して開きます。 2. 開いたら、「Netshwinsockreset」と直接入力し、Enter キーを押して確定します。 3. 確認後、「netshadvfirewallreset&rdqu」と入力します。
機内モードで Bluetooth ヘッドフォンを使用できますか?
Feb 19, 2024 pm 10:56 PM
現代技術の継続的な発展により、ワイヤレス Bluetooth ヘッドセットは人々の日常生活に欠かせないものになりました。ワイヤレスヘッドホンの登場により両手が解放され、音楽や通話などのエンターテインメントをより自由に楽しめるようになりました。ただし、飛行機に乗るときは、携帯電話を機内モードにするように求められることがよくあります。そこで質問は、機内モードで Bluetooth ヘッドフォンを使用できるかということです。この記事では、この疑問について考察していきます。まず、機内モードの機能と意味を理解しましょう。機内モードは携帯電話の特別なモードです
win10 ソフトウェアとの win11 互換性の問題の詳細な説明
Jan 05, 2024 am 11:18 AM
win10システムのソフトウェアは完璧に最適化されていますが、最新のwin11ユーザーにとって、このシステムがサポートされるかどうかは誰もが気になるはずですので、以下ではwin10をサポートしていないwin11ソフトウェアについて詳しく紹介します。一緒に出かけます。 win11 は win10 ソフトウェアをサポートしていますか: 1. Win10 システム ソフトウェア、さらには Win7 システム アプリケーションにも十分な互換性があります。 2. Win11 システムを使用する専門家からのフィードバックによると、現時点ではアプリケーションの非互換性の問題はありません。 3. したがって、自信を持って大胆にアップグレードできますが、一般ユーザーは、Win11 の正式バージョンがリリースされるまでアップグレードする前に待つことをお勧めします。 4. Win11 は互換性が良いだけでなく、Windo も備えています
WIN10の互換性が失われた、それを回復する手順
Mar 27, 2024 am 11:36 AM
1. プログラムを右クリックし、開いたプロパティウィンドウに [互換性] タブがないことを確認します。 2. Win10 デスクトップで、デスクトップ左下のスタートボタンを右クリックし、ポップアップメニューの[ファイル名を指定して実行]を選択します。 3. Win10 の実行ウィンドウが開きます。ウィンドウに「gpedit.msc」と入力し、[OK] ボタンをクリックします。 4. [ローカル グループ ポリシー エディター] ウィンドウが開くので、[コンピューターの構成/管理用テンプレート/Windows コンポーネント] メニュー項目をクリックします。 5. 開いた Windows コンポーネント メニューで [アプリケーション互換性] メニュー項目を見つけ、右側のウィンドウで [プログラム互換性プロパティ ページの削除] 設定項目を見つけます。 6. 設定項目を右クリックし、ポップアップメニューで
