1、DOM編程
是文件對象模型，是可擴展的編程語言的接口，是專門為修改標簽服務的；
思路：先找要修改的標簽，對其進行增加/修改，可以修改某一個屬性/樣式，從而讓標簽動起來；
DOM是和js結合來使頁面動起來的；
2、DOM選擇器
(1)、找標簽的：(document是一個對象)
document.getElementById('id'); //id是唯一的
document.getElementsByName('name'); //名字可以相同
document.getElementsByTagName('tagname'); //通過標簽查找(a、p、div、)
(2)、創建標簽
document.createElement('a');
(3)、獲取/修改樣式
obj.className
(4)、獲取/設置屬性
setattribute(key, val); getattribute(key);
(5)、獲取/修改樣式中的屬性
obj.style.屬性
注意：js中的屬性名稱可能和CSS中的名稱不一致：
以上方法的示例如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>js1</title>
<style>
.show{
}
.hide{
display:none
}
</style>
</head>
<body>
<div id = 't1'>abc</div>
<div id = 't2'>d<span>e</span>f</div>
<hr/>
<!--
<script type='text/javascript'>
var id1 = document.getElementById('t1'); //文檔對象
console.log(id1.innerText); //獲得標簽內容
id1.innerText = '123'; //對標簽內容進行修改
console.log(id1.innerText);
var id2 = document.getElementById('t2'); //文檔對象
console.log(id2.innerHTML); //innerText和innerHTML等價
</script>-->
<!--
<div id = '123'>abcdefghijkl</div>
<hr/>
<div name = 't1'>jkl</div>
<hr/>
<div name = 't1'>uio</div>
<hr/>
<script type = 'text/javascript'>
var s = document.getElementById('123');
s.innerText = 'hao';
var names = document.getElementsByName('t1');
//names[0].innerText = 'de';
//names[1].innerText = 'hen';
for(var items in names){
names[items].innerText = 'zaima?';
}
var all = document.getElementsByTagName('div');
for(var items in all){
all[items].innerText = 'xing';
}
-->
<!--
<div id = 't1' class = 'show' name = 'alex'>內容</div>
<div id = 't2' style = 'width:500px;height:200px;border:2px solid #333;'></div>
-->
<!--
<form id = ‘F1’ action = 'https://www.sogou.com/web?' method = 'GET'>
<input type = 'text' name = 'query'/>
<input type = 'submit' value = '提交' />
<input type = 'button' value = '偽提交' onclick = 'Foo();' />
//點擊執行Foo()函數，是一個事件
</form>
<script type = 'text/javascript'>
/*創建標簽方法1、
var tag = document.createElement('a');
tag.href = 'http://www.baidu.com.cn'
tag.innerText = '點我啊';
var id1 = document.getElementById('t1'); //尋找父容器
id1.appendChild(tag);
*/
/*
創建標簽方法2、
var tag = "<a href = 'http://www.baidu.com.cn'>走你</a>";
var id1 = document.getElementById('t1');
id1.innerHTML = tag;
*/
/*
var id1 = document.getElementById('t1');
id1.className = 'hide'; //修改className
*/
/*
var id1 = document.getElementById('t1');
console.log(id1.getAttribute('name')); //獲取屬性
id1.setAttribute('name', 'oldboy');
console.log(id1.getAttribute('name'));
var id1 = document.getElementById('t2');
console.log(id1.style.width);
*/
提交表單
function Foo(){
var id1 = document.getElementById('F1');
id1.submit();
}
</script> -->
</body>
</html>3、常用事件
當設置事件時，相應的執行操作會執行其所對應的函數。
onclick：點擊事件
onfocus：元素獲得焦點
onblur：元素失去焦點
一個應用(搜索框)：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>頁面一</title>
<style>
.gray{
color:gray;
}
.black{
color:black;
}
</style>
</head>
<body>
<input type = 'text' class = 'gray' id = 'tip' value = '請輸入關鍵字'
onfocus = 'Enter();' onblur = 'Leave();'/>
<script type = 'text/javascript'>
function Enter(){
var id = document.getElementById('tip');
id.className = 'black';
if(id.value == '請輸入關鍵字' || id.value.trim() == ''){
id.value = '';
}
}
function Leave(){
var id = document.getElementById('tip');
var val = id.value;
if(val.length == 0 || id.value.trim() == ''){
id.className = 'gray';
id.value = '請輸入關鍵字';
}else{
id.className = 'black';
}
}
</script>
</body>
</html>運行結果
撤走之后，沒有內容又會恢復原樣?。?！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
