javascript DOM：ID名 クラス名を操作する。
/*-------------------------------------------
BiNDスタイルを除去
-------------------------------------------*/
var removeBiNDstyles = [ 'layout-css', 'options-css', 'theme-css', 'page-css' ];
for (var i = 0; i < removeBiNDstyles.length; i ++) {
var Botan = document.getElementById(removeBiNDstyles[i]);
Botan.parentNode.removeChild(Botan);
}
/*-------------------------------------------
<body> id class 属性の追加
-------------------------------------------*/
window.onload = function(){
// クラスを追加
if(user_bodyclass){
add_class_name(document.getElementsByTagName('body')[0],user_bodyclass);}
//idを追加
if(user_bodyid){
add_id(document.getElementsByTagName('body')[0],user_bodyid);}
}
function add_class_name(obj,add_classes){
var tmp_hash = new Array();
var new_class_names = new Array();
var class_names = obj.className.split(" ").concat(add_classes.split(" "));
for(var i in class_names){if(class_names[i] != ""){tmp_hash[class_names[i]] = 0;}}
for(var key in tmp_hash){new_class_names.push(key);}
obj.className = new_class_names.join(" ");
}
function add_id(obj,add_id){
var tmp_hash = new Array();
var new_id_names = new Array();
var id_names = obj.id.split(" ").concat(add_id.split(" "));
for(var i in id_names){if(id_names[i] != ""){tmp_hash[id_names[i]] = 0;}}
for(var key in tmp_hash){new_id_names.push(key);}
obj.id = new_id_names.join(" ");
}
指定した要素のクラス名は「element.className」で取得・変更できる。
で、元々設定されているクラス名に追加、削除する関数を作ってみました。
追加 function add_class_name(obj,add_classes)
function add_class_name(obj,add_classes){
var tmp_hash = new Array();
var new_class_names = new Array();
var class_names = obj.className.split(" ").concat(add_classes.split(" "));
for(var i in class_names){if(class_names[i] != ""){tmp_hash[class_names[i]] = 0;}}
for(var key in tmp_hash){new_class_names.push(key);}
obj.className = new_class_names.join(" ");
}
削除 function delete_class_name(obj,delete_classes)
function delete_class_name(obj,delete_classes){
var new_class_names = new Array();
var class_names = obj.className.split(" ");
var delete_class_names = delete_classes.split(" ");
for(var i in class_names){
var flag = true;
for(var j in delete_class_names){
if(class_names[i] == delete_class_names[j]){flag = false;break;};
}
if(flag){new_class_names.push(class_names[i])}
}
obj.className = new_class_names.join(" ");
}
DOMについてここにメモしていきます。
「document.getElementById( ID )」でHTMLの要素につけたIDからその要素のオブジェクトを取得できます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>DOMテスト</title>
</head>
<body>
<p id="targetElement">
DOMの実験をします。このJavaScriptはこの段落の内容を取得します。
</p>
<p>
<a href="javascript:alert(document.getElementById('targetElement').innerHTML);">
段落の内容を取得
</a>
</p>
</body>
</html>
「document.getElementsByName( Name )」でHTMLの要素につけた「Name」属性からその「Name」属性を持った要素のリストを取得できます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>DOMテスト</title>
</head>
<body>
<p name="targetElement">
DOMの実験をします。このJavaScriptはこの段落の内容を取得します。
</p>
<p>
<a href="javascript:alert(document.getElementsByName('targetElement')[0].innerHTML);">
段落の内容を取得
</a>
</p>
</body>
</html>
「document.getElementsByTagName( タグ名 )」でHTMLのタグ名から要素のオブジェクトのリストを取得できます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>DOMテスト</title>
</head>
<body>
<p> DOMの実験をします。このJavaScriptはこの段落の内容を取得します。 </p>
<p>
<a href="javascript:alert(document.getElementsByTagName('p')[0].innerHTML);">
段落の内容を取得
</a>
</p>
</body>
</html>
「createElement」と「appendChild」で要素を追加できます。「createTextNode」でテキストを追加し、「setAttribute」で属性を設定できます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>DOMテスト</title>
<script type="text/javascript">
<!--
function appendParagraph(){
//段落のオブジェクトを生成
var ParagraphObj = document.createElement('p');
//ParagraphObj の子要素に 文字列のノード を追加
ParagraphObj.appendChild(document.createTextNode('JavaScriptで追加した段落です'));
//ParagraphObj の style を設定
ParagraphObj.setAttribute('style', 'background-color:#E0E0E0;');
//body の一番最後に追加
document.body.appendChild(ParagraphObj);
}
-->
</script>
</head>
<body onload="appendParagraph()">
<p>
DOMの実験をします。JavaScriptでDOMのノードを追加します。
</p>
</body>
</html>
「document.body」以外でも、「getElementById」などで取得した要素にも「appendChild」で追加できます。
