DOM基礎とDOMの簡単な応用
6163 ワード
1 DOMベース:
1.2ブラウザの互換性IE9.0 40%; Chrome 60%; Firefox 99%;
1.3 DOMノード:.サブノード(childNode,nodeType).親ノード(parentNode)はスタイルの影響を受けません.offsetParent//は、すでに配置されている親要素を探します.スタイルによって違います
CSS絶対位置決め要素は、誰によって位置決めされますか?これは、既に位置する親要素に基づいて位置付けされ、位置付けされた親要素1.4の先頭ノードを常に上に探す.firstChild,firstElementChild .LastChild,lastElementChild 1.5兄弟ノード.nextSibling,nextElementSibling .previousSibling,previousElementSibling
1.6 DOMを利用して要素属性要素の属性操作を操作する方法:第一種類:oDiv.style.display='block'//属性値を変更できる方法2つ目:oDiv.style['display']='block'//すなわち属性値を変更することもできるし、属性名を変更することもできる3つ目:DOM方式を用いる.DOM方式の操作要素の属性取得:getAttribute(名前).設定:setAttribute(名前、値).削除:removeAttribute(名前)1.7 classNameを使用して要素を取得します.classNameで要素を選択する方法すべての要素を選択します.className条件でフィルタします.関数1.8の作成、要素の挿入、削除にカプセル化する.作成DOM要素createElement(ラベル名)作成ノード、appendChild(ノード)作成ノードを挿入し、末尾にノードを追加する.要素を挿入します.InsertBefore(ノード、既存のノード)は、既存の要素の前にノードを挿入する.DOM要素removeChild(ノード)を削除ノードの親を削除する.removeChild(サブノード)ノード1.9ドキュメントフラグメント//を削除するのは、ページに多くのノードを挿入する必要がある場合、ドキュメントフラグメントを採用しない場合は、まずノードを挿入し、ページをレンダリングすることでDOMのパフォーマンスを低下させるためです.作成したノードをまず急いでページを挿入するのではなく、まずドキュメントの破片に挿入し、最後にドキュメントの破片のノードを一度にすべて挿入すると、ページは一度だけレンダリングされ、DOMのパフォーマンスが大幅に向上します.ドキュメントの断片化はDOMの操作性能を向上させることができる.ドキュメントフラグメントの原理document.createDocumentFragment();
2 DOMの簡単な応用
適用一:表の改行変色
適用2:表の追加と削除
1.2ブラウザの互換性IE9.0 40%; Chrome 60%; Firefox 99%;
1.3 DOMノード:.サブノード(childNode,nodeType).親ノード(parentNode)はスタイルの影響を受けません.offsetParent//は、すでに配置されている親要素を探します.スタイルによって違います
CSS絶対位置決め要素は、誰によって位置決めされますか?これは、既に位置する親要素に基づいて位置付けされ、位置付けされた親要素1.4の先頭ノードを常に上に探す.firstChild,firstElementChild .LastChild,lastElementChild 1.5兄弟ノード.nextSibling,nextElementSibling .previousSibling,previousElementSibling
1.6 DOMを利用して要素属性要素の属性操作を操作する方法:第一種類:oDiv.style.display='block'//属性値を変更できる方法2つ目:oDiv.style['display']='block'//すなわち属性値を変更することもできるし、属性名を変更することもできる3つ目:DOM方式を用いる.DOM方式の操作要素の属性取得:getAttribute(名前).設定:setAttribute(名前、値).削除:removeAttribute(名前)1.7 classNameを使用して要素を取得します.classNameで要素を選択する方法すべての要素を選択します.className条件でフィルタします.関数1.8の作成、要素の挿入、削除にカプセル化する.作成DOM要素createElement(ラベル名)作成ノード、appendChild(ノード)作成ノードを挿入し、末尾にノードを追加する.要素を挿入します.InsertBefore(ノード、既存のノード)は、既存の要素の前にノードを挿入する.DOM要素removeChild(ノード)を削除ノードの親を削除する.removeChild(サブノード)ノード1.9ドキュメントフラグメント//を削除するのは、ページに多くのノードを挿入する必要がある場合、ドキュメントフラグメントを採用しない場合は、まずノードを挿入し、ページをレンダリングすることでDOMのパフォーマンスを低下させるためです.作成したノードをまず急いでページを挿入するのではなく、まずドキュメントの破片に挿入し、最後にドキュメントの破片のノードを一度にすべて挿入すると、ページは一度だけレンダリングされ、DOMのパフォーマンスが大幅に向上します.ドキュメントの断片化はDOMの操作性能を向上させることができる.ドキュメントフラグメントの原理document.createDocumentFragment();
2 DOMの簡単な応用
適用一:表の改行変色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oTab=document.getElementById('tab');
var color='';// ， ， ， color
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].onmouseover=function(){
color=this.style.background;// ，
this.style.background='yellow'; // ，
}
oTab.tBodies[0].rows[i].onmouseout=function(){
this.style.background=color;
}
if(i%2){oTab.tBodies[0].rows[i].style.background='blue';}
else{oTab.tBodies[0].rows[i].style.background='';}
}
}
</script>
</head>
<body>
<table border="1" bordercolor="blue" id="tab">
<thead>
<td><h2>ID</h2></td>
<td><h2>Name</h2></td>
<td><h2>Age</h2></td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>Mikyou</td>
<td>26</td>
</tr>
<tr>
<td>3</td>
<td>weak</td>
<td>24</td>
</tr>
<tr>
<td>4</td>
<td>sky</td>
<td>35</td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
適用2:表の追加と削除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oTab=document.getElementById('tab');
var oBt=document.getElementsByTagName('input');
var id=oTab.tBodies[0].rows.length+1;
oBt[2].onclick=function(){
var oTr=document.createElement('tr');
var oTd=document.createElement('td');
oTd.innerHTML=id++;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=oBt[0].value;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=oBt[1].value;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML='<a href="javascript:;"> </a>';
oTr.appendChild(oTd);
var oA=oTd.getElementsByTagName('a')[0];
oA.onclick=function(){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
oTab.tBodies[0].appendChild(oTr);
}
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
var oA=oTab.tBodies[0].rows[i].cells[3].getElementsByTagName('a')[0];
oA.onclick=function(){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
}
}
</script>
</head>
<body>
:<input type="text" />
:<input type="text" />
<input type="button" value=" "/>
<table border="1" bordercolor="blue" id="tab" width="300" style="text-align: center;">
<thead>
<td><h2>ID</h2></td>
<td><h2>Name</h2></td>
<td><h2>Age</h2></td>
<td><h2> </h2></td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>15</td>
<td><a href="javascript:;"> </a></td>
</tr>
<tr>
<td>2</td>
<td>Mikyou</td>
<td>26</td>
<td><a href="javascript:;"> </a></td>
</tr>
<tr>
<td>3</td>
<td>weak</td>
<td>24</td>
<td><a href="javascript:;"> </a></td>
</tr>
<tr>
<td>4</td>
<td>sky</td>
<td>35</td>
<td><a href="javascript:;"> </a></td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td>18</td>
<td><a href="javascript:;"> </a></td>
</tr>
</tbody>
</table>
</body>
</html>