DOM編程

時間  2020-11-28
標籤 javascript css html java 編程 後端 app ide 函數 欄目 HTML 简体版
原文   原文鏈接

1、DOM簡介javascript


        文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標誌語言的標準編程接口。
css

能夠將每一個HTML標籤都作爲一個對象，JavaScript經過調用DOM中的屬性、方法就能夠對網頁中的文本框、層等元素進行編程控制。html



選擇器：java

  • document.getElementById('id')編程

  • document.getElementsByName('name')後端

  • document.getElementsByTagName('tagname')app


實例演示1、修改單個標籤中的文本內容。ide

<div id="n1">
<p>hello aaaaaa</p>
</div>

<script type="text/javascript">
<!-- 經過標籤ID獲取到標籤對象 -->
var name1 = document.getElementById('n1');
<!-- 修改標籤文本內容爲'tuchao' -->
name1.innerText = 'tuchao';
</script>


實例演示2、經過標籤name修改多個標籤的內容函數

<div id="n1">
<p>hello aaaaaa</p>
</div>
<hr/>
<div name="n2"> <p>heheheheeeeeee</p></div>
<hr/>
<div name="n2"> <p>bbabababbabab</p></div>

<script type="text/javascript">
<!-- 經過標籤name獲取到標籤對象 -->
var name2 = document.getElementsByName('n2');
<!-- 當獲取到多個同name標籤時，則經過序號來區別，name2[0]表示第一個，name2[1]則表示第二個 -->
name2[0].innerText = 'tuchao';
name2[1].innerText = 'tuchao';
</script>

頁面效果：ui

wKioL1bEMIDT76I9AAAG4wS6txc583.png


實例演示3、經過標籤tag修改多個標籤的內容

<div id="n1">
<p>hello aaaaaa</p>
</div>
<hr/>
<div name="n2"> <p>heheheheeeeeee</p></div>
<hr/>
<div name="n2"> <p>bbabababbabab</p></div>

<script type="text/javascript">
<!-- 經過標籤tag獲取到標籤對象 -->
var name3 = document.getElementsByTagName('div');
<!-- 對該對象進行循環，逐一取出每一個對象進行修改 -->
for (var item in name3){

    name3[item].innerText = 'elephant'
	}
</script>

頁面效果：

wKioL1bEMqyi1N_jAAAEH6wzSMg981.png

經常使用函數：

  • 建立標籤

       document.createElement('a')

  • 獲取或者修改樣式

        obj.className

  • 獲取或設置屬性

        setattribute(key,val)    getattribute(key)

  • 獲取或修改樣式中的屬性

        obj.style.屬性

  • 提交表單

        document.geElementById('form_id').submit()


實例演示4、在標籤中加入內容

<div id="n1">
<p>hello aaaaaa</p>
</div>

<script type="text/javascript">
<!-- 建立一個a標籤 -->
var tag = document.createElement("a");
<!-- 給建立的標籤賦予連接 -->
tag.href = '
 <!-- 給標籤設置文本字符 -->
tag.innerText = '點但願';

var id1 = document.getElementById('n1');
<!-- 給id1對象添加標籤 -->
id1.appendChild(tag);

</script>

頁面效果：

wKiom1bEOjWxVENhAAAC5BDH8aE193.png


實例演示5、標籤替換

<div id="n1">
<p>hello aaaaaa</p>
</div>

<script type="text/javascript">
<!-- 建立標籤對象 -->
var tag = "<a href='http://www.baidu.com'>百度一下</a>"
var id1 = document.getElementById('n1');
<!-- 替換標籤 -->
id1.innerHTML = tag;
</script>

頁面效果會顯示原id="n1"的div標籤消失了，替換成了自定義的超連接標籤。


實例演示6、修改標籤的Class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
    <title>js_st1</title>
    <style type="text/css">
    	.hide {display: none;}
    	.n22 {color:red;}

    </style>

</head>
<body>
    <div class="n22" name="n2"> <p>heheheheeeeeee</p></div>
    <hr/>
    <div name="n2"> <p>bbabababbabab</p></div>

<script type="text/javascript">
var id2 = document.getElementsByName('n2');
<!-- 將原樣式n22替換爲hide樣式 -->
id2[0].className = 'hide'
</script>      
</body>
</html>

此時第一個div在頁面中將不會顯示了


實例演示7、修改標籤的name值

<div id="n3" name="dog"> </div>

<script type="text/javascript">
<!-- 經過id獲取到標籤對象 -->
var id3 = document.getElementById('n3');
<!-- 使用log打印原name值 -->
console.log(id3.getAttribute('name'));
<!-- 修改標籤的name值爲'cow' -->
id3.setAttribute('name','cow');
console.log(id3.getAttribute('name'));
</script>

頁面效果：

wKioL1bERcHC_WC5AAAtAWRMTsw355.png


實例演示8、修改標籤樣式

<div style="width:500px; height:300px; border:solid black 1px" id="n3" name="dog"> </div>

<script type="text/javascript">
var id3 = document.getElementById('n3');
<!-- 獲取該標籤的寬度 -->
var w = id3.style.width;
console.log(w);
<!-- 修改樣式 -->
id3.style.width = '200px'
</script>

頁面效果：修改前

wKioL1bESOSRizCOAAAM3SpJY_o215.png

頁面效果：修改後

wKioL1bESO-ijmHyAAAEdRqevg8430.png


經常使用事件：

wKiom1bEbrPChngOAAOLKOkh7Gc125.png


實例演示9、建立按鈕點擊事件

<form id="F1" action='https://www.baidu.com/s?' method="GET">
    <!-- 這裏的wd是傳給後端程序的value -->
    <input type='text' name='wd' />
  <!-- 定義點擊事件，對應Foo()函數 -->  
	<input type='button' value='按鈕提交' onclick='Foo();' />

</form>

<script type="text/javascript">
<!-- 定義點擊函數內容，提交'F1'對象表單 -->
function Foo (){

	document.getElementById('F1').submit()
}
</script>


經常使用方法：

  • 定義一個函數每隔必定的時間自動執行一次，括號中左邊寫執行的函數名逗號分割，右邊寫間隔的時長單位爲毫秒。

        setInterval('Foo()',20)

  • 用於中止setInterval的循環執行，這個函數括號中接受的參數爲setInterval函數返回的值。

        clearInterval(interval)

  • 定義一個函數間隔必定的時間自動執行，與setInterval函數不一樣的是這個方法只讓函數執行一次。

        setTimeout('Go()',10000)

  • 用於取消setTimeout函數的執行，函數接受的參數是setTimeout函數返回的值。

        clearTimeout()


搜索框實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
    <title>搜索框實例</title>
    <style type="text/css">
    .gray{color: gray;
    	height: 30px;
    	width: 220px;
   }

   .black{
   	color: black;
   	height: 30px;
	width: 220px;
   }

    </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');

 		if(id.value=='請輸入關鍵詞' || id.value.trim()==''){
 			
 			id.value='請輸入關鍵詞'
 			id.className='gray'

 		}else{
 			id.className='black'
 		}
 	}
 
 </script>
</body>
</html>


×××燈實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
    <title>×××燈&nbsp;&nbsp;哈哈和進度條&nbsp;&nbsp;</title>
    <style type="text/css">
    </style>

</head>
<body>
<script type="text/javascript">

    function Go(){

    <!-- 獲取title文本內容 -->
	var content = document.title;
	<!-- 獲取內容的第一個字符 -->
	var firstChar = content.charAt(0)
	<!-- 獲取title的第二個至最後一個字符 -->
	var sub = content.substring(1,content.length)
	document.title = sub + firstChar;
}

setInterval('Go()',1000);
</script>
</body>
</html>


進度條實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
    <title>×××燈&nbsp;&nbsp;哈哈和進度條&nbsp;&nbsp;</title>
    <style type="text/css">
    </style>

</head>
<body>
	<div style="width:1000px;background-color:gray">
		<div id='jindu' style="width:10%;background-color:red;height:20px;"></div>

	</div>

	<div>
		<input type='button' value='點擊中止' onclick='Stop();' />
	</div>

<script type="text/javascript">

pro = 10
function Foo(){
	var id = document.getElementById('jindu');
	pro = pro + 1;
	if(pro > 100){
		clearInterval(interval)
	}else{	
		id.style.width = pro+'%';
	}
}
interval = setInterval('Foo()',20)

<!-- 定義中止函數，用於中止進度條 -->
function Stop(){

	clearInterval(interval)
}


</script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程