小強のHTML 5モバイル開発の道(30)-JavaScriptレビュー5
4847 ワード
一、検索
1つ目の方法:idに基づいて検索
var obj = document.getElementById(id);//documentはHTML Documentの例です
var arr = node.getElementsByTagName('tagName');
遍歴の使用方法(ブラウザの互換性が悪い)
parentNode
previousSibling前の兄弟
nextSibling次の兄弟
childNodesのすべてのサブノード
FirstChildの前のサブノード
LastChildの後のサブノード
遍歴の仕方はブラウザの互換性の問題があるので、できるだけ使わないでください.
二、作成
document.createElement(tagName);//タグ名を表すタグ名
三、追加
node.appendChild(obj);//最後の子として追加
node.insertBefore(obj, refNode);//refNodeの前に追加
node.replaceChild(obj, refNode);//refNodeの置換
四、削除
node.removeChild(obj);
五、様式
1つ目の方法:ノードのclassNameプロパティを変更する
例えばvar obj=document.getElementById('id1'); obj.className = 's1';//s 1スタイル****を使用した例:フォーム検証****
2つ目は、ノードのstyleプロパティを変更することです.
1.インラインスタイルでなければなりません
2.background-colorなどのスタイル属性名を変更する場合は、次のようにnodeを変更します.style.backgroundColor = 'red';
ブラウザの2つの既定の動作を禁止する方法:
接続をクリックすると、ブラウザはhrefプロパティが指すアドレスに要求します.
フォームの送信ボタンをクリックすると、ブラウザがフォームを送信します.
禁止の方式
1つ目の方法:idに基づいて検索
var obj = document.getElementById(id);//documentはHTML Documentの例です
<html>
<head>
<script>
function f1(){
var obj = document.getElementById('a1'); // ，
//innerHTML ： html
//alert(obj.innerHTML);
obj.innerHTML = " "; //
}
function f2(){
var obj = document.getElementById('d1');
alert(obj.innerHTML);
}
function f3(){
var obj = document.getElementById('username');
//value ：
alert(obj.value); //
obj.value = 'abc';//
}
</script>
</head>
<body style="font-size:30px;font-style:italic;">
<!--javascript:; js -->
<a href="javascript:;" id="a1" onclick="f1();">click me</a><br/>
<div id="d1" ><span> </span></div><br/>
<input type="text" id="username" name="username"/><br/>
<input type="button" value=" " onclick="f3();"/>
</body>
</html> var arr = node.getElementsByTagName('tagName');
<html>
<head>
<style>
ul{
list-style-type:none;
}
ul li{
float:left;
border:1px solid black;
margin-left:10px;
width:100px;
height:40px;
background-color:red;
cursor:pointer;
}
.selected{
background-color:#ff88ee;
}
</style>
<script src="myjs.js"></script>
<script>
function doAction(index){
var arr = $('u1').getElementsByTagName('li');
for(i=0; i<arr.length; i++){
arr[i].className = '';
}
var obj = $('l'+index);
obj.className = 'selected';
}
</script>
</head>
<body style="font-size:30px;">
<ul id="u1">
<li onmouseover="doAction(1);" id="l1"> </li>
<li onmouseover="doAction(2);" id="l2"> </li>
<li onmouseover="doAction(3);" id="l3"> </li>
</ul>
</body>
</html> 遍歴の使用方法(ブラウザの互換性が悪い)
parentNode
previousSibling前の兄弟
nextSibling次の兄弟
childNodesのすべてのサブノード
FirstChildの前のサブノード
LastChildの後のサブノード
遍歴の仕方はブラウザの互換性の問題があるので、できるだけ使わないでください.
二、作成
document.createElement(tagName);//タグ名を表すタグ名
三、追加
node.appendChild(obj);//最後の子として追加
node.insertBefore(obj, refNode);//refNodeの前に追加
node.replaceChild(obj, refNode);//refNodeの置換
四、削除
node.removeChild(obj);
<html>
<head>
<script src="myjs.js"></script>
<script>
function f1(){
var obj = document.createElement('div');
obj.innerHTML = ' ...';
obj.className = 's1';
// $('d1').appendChild(obj);
// $('d1').insertBefore(obj, $('a1'));
// $('d1').replaceChild(obj, $('a1'));
$('d1').removeChild($('a1'));
}
</script>
<style>
.s1{
width:200px;
height:100px;
background-color:red;
}
</style>
</head>
<body style="font-size:30px;" id="d1">
<!-- <a href="javascript:alert('hello');"> java</a> -->
<a id="a1" href="javascript:;" onclick="f1();"> java</a>
</body>
</html>五、様式
1つ目の方法:ノードのclassNameプロパティを変更する
例えばvar obj=document.getElementById('id1'); obj.className = 's1';//s 1スタイル****を使用した例:フォーム検証****
2つ目は、ノードのstyleプロパティを変更することです.
1.インラインスタイルでなければなりません
2.background-colorなどのスタイル属性名を変更する場合は、次のようにnodeを変更します.style.backgroundColor = 'red';
<html>
<head>
<style>
#d1{
width:80px;
height:80px;
background-color:blue;
position:relative;
}
</style>
<script src="myjs.js"></script>
<script>
function f1(){
var v1 = parseInt($('d1').style.left);
$('d1').style.left = v1 + 50 + 'px';
}
</script>
</head>
<body>
<div id="d1" style="left:10px;"></div>
<input type="button" value="click me"
onclick="f1();"/>
</body>
</html>ブラウザの2つの既定の動作を禁止する方法:
接続をクリックすると、ブラウザはhrefプロパティが指すアドレスに要求します.
フォームの送信ボタンをクリックすると、ブラウザがフォームを送信します.
禁止の方式