今回は、JavaScript DOM アプリケーションについて詳しくご紹介します。 JavaScript DOM アプリケーションを使用する際の 注意事項 について、実際の事例を見てみましょう。
DOM とは:
ドキュメント、ノード!実際、CSS ではラベル、JS では要素、DOM ではノードと呼ばれます。
IE: 10% Chrome :60% FF:99% サポート
DOM ノード
childNodes: 子ノード
nodeType: ノードのタイプ
nodeType == 3 -> テキストノード
nodeType == 1 -> 要素子ノードを取得するには、
childNodes とnodeType
<head> <meta charset="UTF-8">
<title>01-DOM基础</title>
<script>
window.onload = function () { // ul的子节点为li
var oUl = document.getElementById('ul1'); for(var i=0;i<oUl.childNodes.length;i++){ //由于在不同的浏览器下,获取到的oUl.childNodes是不一样的;IE6-8会将文本节点也算进去;
//故若想给元素节点修改样式,可以通过 oUl.childNodes[i].nodeType == 1 来获取元素节点,并修改样式;
//nodeType==3 -> 文本节点
//nodeType==1 -> 元素节点
//给所有的li设置背景颜色
if(oUl.childNodes[i].nodeType == 1){
oUl.childNodes[i].style.background = 'red';
}
}
} </script></head><body><ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>abcdefg //文本节点<span>abcdefg</span> //元素节点</body></html>ログイン後にコピー
と組み合わせて使用します
children: これにはテキストではなく要素のみが含まれ、すべてのブラウザと互換性があります
したがって、上記の例は次のように書くことができますが、単純かつ粗雑です。 !!
for (var i=0;i<oUl.children.length;i++){
oUl.children[i].style.background = 'red';
}ログイン後にコピー
parentNode: 親ノード例: リンクをクリックして、li
parentNode 全体を非表示にします。例:
<html lang="en"><head>
<meta charset="UTF-8">
<title>02-parentNode</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>
<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>ログイン後にコピー
offsetParent 例: ページ上の要素の実際の位置を取得します
主に位置決めに使用され、要素の実際の親ノード。
例 1: 2 番目の div2 Positioning に
absolute を設定し、div2 の親ノード div1 には何も設定しない場合、div2 の offsetParent が body になります。
<html lang="en"> <head> <meta charset="UTF-8"> <title>offsetParent</title> <style> #div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px;} #div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;} </style> <script> window.onload = function () { oDiv2 = document.getElementById('div2'); alert(oDiv2.offsetParent); //结果:[object HTMLBodyElement] 父节点为body; } </script> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>ログイン後にコピー
<html lang="en"> <head> <meta charset="UTF-8"> <title>offsetParent</title> <style> #div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px; position: relative;} #div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;} </style> <script> window.onload = function () { oDiv2 = document.getElementById('div2'); alert(oDiv2.offsetParent); //结果:[object HTMLDivElement] 父节点为div; } </script> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>ログイン後にコピー
2.DOM ノード (2) の
頭と尾の子ノード
には互換性の問題があります
firstChild、firstElementChild
lastChild 、lastElementChild
//IE6-8 //oUl.firstChild.style.background='red'; //高级浏览器 //oUl.firstElementChild.style.background='red';
ログイン後にコピー
使用例
rreee -Siblingノード（上記と同じように） style.display='block'; 2 番目のタイプ: oDiv.style['display']=' block'; 3 番目のメソッド: Dom メソッド: oDiv2.setAttribute('display','none');
DOM メソッド要素の属性を操作する
Get: getAttribute(name)
Set: setAttribute(name, value)
Delete:removeAttribute(name)
4. className を使用して要素を選択する
className を使用して要素を選択する方法
すべての要素を選択する
className条件でフィルタリング基本的な使い方
<html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ var oUl=document.getElementById('ul1'); //IE6-8
//oUl.firstChild.style.background='red';
//高级浏览器
//oUl.firstElementChild.style.background='red';
//给第一个li设置红色背景:由于兼容问题,故需判断下
if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background='red';
} else
{
oUl.firstChild.style.background='red';
}
};</script></head><body><ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li></ul></body></html>ログイン後にコピー
関数にカプセル化
高度な使い方
<html><head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function () { var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++)
{ if(aLi[i].className=='box')
{
aLi[i].style.background='red';
}
}
}; </script></head><body><ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li></ul></body></html>ログイン後にコピー
5.要素の作成、挿入、削除
DOM要素の作成
createElement(タグ名) ノードの作成appendChild(node)ノードの追加
注: appendChild(node) には 2 つの関数があります:
(1) この要素が createElement( タグ名) に渡される場合、この要素に親がある場合は、新しい親に直接追加できます。 , 次に、 1. まず元の親から要素を削除します; 2. 新しい親に追加します 親.
例: ul
<script>
//封装成函数
function getByClass(oParent, sClass) { var aResult=[]; var aEle=oParent.getElementsByTagName('*');//*通配符,获取oParent下面所有的节点
for(var i=0;i<aEle.length;i++)
{ if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
} return aResult;
} window.onload=function () { var oUl=document.getElementById('ul1'); var aBox=getByClass(oUl, 'box'); for(var i=0;i<aBox.length;i++)
{
aBox[i].style.background='red';
}
}; </script>
<body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
</ul></body>ログイン後にコピー
にliを挿入します
この記事の事例を読んだ後、あなたは方法をマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。
推奨読書:
JavaScriptの基本的な応用を深く理解する
JSで注意すべき8つの基礎知識
以上が詳細な JavaScript DOM アプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
