Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 国产日韩视频一区,欧美在线小视频,日韩经典一区 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          HTML 中 DOM的使用，知道這些就夠了
          
        
           
          
	
	
          
		HTML 中 DOM的使用，知道這些就夠了
          
                        
          TML DOM (文檔對(duì)象模型)
          當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對(duì)象模型（Document Object Model）。
          HTML DOM 定義了用于 HTML 的一系列標(biāo)準(zhǔn)的對(duì)象，以及訪問和處理 HTML 文檔的標(biāo)準(zhǔn)方法。通過 DOM，你可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性。
          HTML DOM 模型被構(gòu)造為對(duì)象的樹：

          查找 HTML 元素
          //通過 id 查找 HTML 元素
var x=document.getElementById("intro");

//通過標(biāo)簽名查找 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

//通過類名找到 HTML 元素
var x=document.getElementsByClassName("intro");
          HTML DOM 改變 HTML 內(nèi)容
          //改變 HTML 輸出流
document.write(Date());
//絕對(duì)不要在文檔加載完成之后使用,用btn點(diǎn)擊事件執(zhí)行 document.write()。這會(huì)覆蓋該文檔。

//改變 HTML 內(nèi)容
document.getElementById(id).innerHTML=new HTML

//改變 HTML 屬性
document.getElementById(id).attribute=new value
          HTML DOM 改變 CSS
          //改變 HTML 樣式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

<h1 id="id1">我的標(biāo)題 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
點(diǎn)我!</button>
          HTML DOM 事件
          //對(duì)事件做出反應(yīng)
<h1 onclick="this.innerHTML='Ooops!'">點(diǎn)擊文本!</h1>

<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點(diǎn)擊文本!</h1>
</body>


//HTML 事件屬性
<body>
<p>點(diǎn)擊按鈕執(zhí)行 <em>displayDate()</em> 函數(shù).</p>
<button onclick="displayDate()">點(diǎn)我</button>
<script>
function displayDate()
{
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>


//使用 HTML DOM 來分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};

//onchange 事件
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
輸入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>當(dāng)你離開輸入框后，函數(shù)將被觸發(fā)，將小寫字母轉(zhuǎn)為大寫字母。</p>
</body>
          HTML DOM 事件監(jiān)聽器
          //addEventListener() 方法
<body>
<p>該實(shí)例使用 addEventListener() 方法在按鈕中添加點(diǎn)擊事件。 </p>
<button id="myBtn">點(diǎn)我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML=Date();
}
</script>
</body>

//向原元素添加事件句柄
<body>
<p>該實(shí)例使用 addEventListener() 方法在按鈕中添加點(diǎn)擊事件。 </p>
<button id="myBtn">點(diǎn)我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

//向同一個(gè)元素中添加多個(gè)事件句柄
<body>
<p>該實(shí)例使用 addEventListener() 方法向同個(gè)按鈕中添加兩個(gè)點(diǎn)擊事件。</p>
<button id="myBtn">點(diǎn)我</button>
<script>
var x=document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函數(shù)已執(zhí)行!")
}
</script>
</body>
          HTML DOM 元素
          在文檔對(duì)象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性，分別是：
          1. nodeName : 節(jié)點(diǎn)的名稱
          2. nodeValue ：節(jié)點(diǎn)的值
          3. nodeType ：節(jié)點(diǎn)的類型
          創(chuàng)建新的 HTML 元素
          <body>
<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另一個(gè)段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是一個(gè)新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
          刪除已有的 HTML 元素
          <body>
<div id="div1">
	<p id="p1">這是一個(gè)段落。</p>
	<p id="p2">這是另一個(gè)段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>


          以上內(nèi)容整理于網(wǎng)絡(luò)，如有侵權(quán)請(qǐng)聯(lián)系刪除。
          所有內(nèi)置的JavaScript對(duì)象
           所有瀏覽器對(duì)象
           所有HTML DOM對(duì)象
            JavaScript 對(duì)象參考手冊(cè)
           參考手冊(cè)描述了每個(gè)對(duì)象的屬性和方法，并提供了在線實(shí)例。
          • Array 對(duì)象
          • Boolean 對(duì)象
          • Date 對(duì)象
          • Math 對(duì)象
          • Number 對(duì)象
          • String 對(duì)象
          • RegExp 對(duì)象
          • 全局屬性和函數(shù)
           Browser 對(duì)象參考手冊(cè)
          參考手冊(cè)描述了每個(gè)對(duì)象的屬性和方法，并提供了在線實(shí)例。
          • Window 對(duì)象
          • Navigator 對(duì)象
          • Screen 對(duì)象
          • History 對(duì)象
          • Location 對(duì)象
            HTML DOM 參考手冊(cè)
          參考手冊(cè)描述了 HTML DOM 的屬性和方法，并提供在線實(shí)例。
          • HTML Document
          • HTML Element
          • HTML Attributes
          • HTML Events


            HTML DOM 元素對(duì)象參考手冊(cè)
          參考手冊(cè)描述了每個(gè)對(duì)象的屬性和方法，并提供了在線實(shí)例。
          • Anchor 對(duì)象
          • Area 對(duì)象
          • Base 對(duì)象
          • Body 對(duì)象
          • Button 對(duì)象
          • Form 對(duì)象
          • Frame/IFrame 對(duì)象
          • Frameset 對(duì)象
          • Image 對(duì)象
          • Input Button 對(duì)象
          • Input Checkbox 對(duì)象
          • Input File 對(duì)象
          • Input Hidden 對(duì)象
          • Input Password 對(duì)象
          • Input Radio 對(duì)象
          • Input Reset 對(duì)象
          • Input Submit 對(duì)象
          • Input Text 對(duì)象
          • Link 對(duì)象
          • Meta 對(duì)象
          • Object 對(duì)象
          • Option 對(duì)象
          • Select 對(duì)象
          • Style 對(duì)象
          • Table 對(duì)象
          • td / th 對(duì)象
          • tr 對(duì)象
          • Textarea 對(duì)象


           如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
          OM節(jié)點(diǎn)獲取
          var oLi=document.getElementsByTagName("li");
var oLi=document.getElementById("cssLi");
var oLi=document.getElementsByName("myInput");
          操作屬性：
          document.getElementById(id).attribute=new value
          實(shí)例
          本例改變了 <img> 元素的 src 屬性：
          <!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
          操作內(nèi)容
          修改 HTML 內(nèi)容的最簡(jiǎn)單的方法時(shí)使用 innerHTML 屬性和innerText（IE支持） outerText outerHTML
          區(qū)別描述如下：
          innerHTML 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的 HTML
          outerHTML 設(shè)置或獲取對(duì)象及其內(nèi)容的 HTML 形式
          innerText 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本
          outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對(duì)象的文本
          document.getElementById(id).innerHTML=new HTML
          實(shí)例一
          本例改變了 <p> 元素的內(nèi)容：
          <html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
          實(shí)例二：
          <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML、innerText、outerHTML之間的區(qū)別</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
　　　id1.innerHTML="<i><u>設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的 HTML.</u></i>";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　id2.innerText="<i><u>設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本.</u></i>";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　id3.outerHTML="<font size=9pt color=red><i><u>設(shè)置或獲取對(duì)象及其內(nèi)容的 HTML 形式.</u></i></font>";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　id4.outerText="<br></br><i><u>設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對(duì)象的文本.</u></i>";
　　}
　　</script>
　　</head>
　　<body>
　　<ul>
　　<li id="id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
　　<li id="id2" onclick="innerTextDemo()">innerText效果.</li>
　　<li id="id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
　　<li id="id4" onclick="outerTextDemo()">outerText效果.</li>
　　</ul>
　　</body>
　　</html>
          簡(jiǎn)單的說innerHTML和outerHTML、innerText與outerText的不同之處在于：
          　　1)、innerHTML與outerHTML在設(shè)置對(duì)象的內(nèi)容時(shí)包含的HTML會(huì)被解析，而innerText與outerText則不會(huì)。
          　　2)、在設(shè)置時(shí)，innerHTML與innerText僅設(shè)置標(biāo)簽內(nèi)的文本，而outerHTML與outerText設(shè)置包括標(biāo)簽在內(nèi)外的文本(多個(gè)標(biāo)簽)。
          特別說明：
          　　innerHTML是符合W3C標(biāo)準(zhǔn)的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText，
          　　如果要輸出不含HTML標(biāo)簽的內(nèi)容，可以使用innerHTML取得包含HTML標(biāo)簽的內(nèi)容后，再用正則表達(dá)式去除HTML標(biāo)簽，
          　　下面是一個(gè)簡(jiǎn)單的符合W3C標(biāo)準(zhǔn)的示例：
          <a href="javascript：alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標(biāo)準(zhǔn)</a>
          操作樣式
          如需改變 HTML 元素的樣式，請(qǐng)使用這個(gè)語法：
          document.getElementById(id).style.property=new style
          CSS樣式的個(gè)別屬性采用馱峰式寫法(如：backgroundColor), 且不帶橫線。
          document.body.style.backgroundColor="red";
          如：
          <p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
document.getElementById(id).className="類名"；
document.getElementById(id).className="類名1 類名2"；
document.getElementById(id).className+=" 類名3"；//注意要留有空格
          <!DOCTYPE HTML>
<html>
<head>
<title>追加CSS類別</title>
<style type="text/css">
.myUL1{
color:#0000FF;
font-family:Arial;
font-weight:bold;
}
.myUL2{
text-decoration:underline;
}
</style>
<script language="javascript">
function check(){
var oMy=document.getElementsByTagName("ul")[0];
oMy.className +=" myUL2"; //追加CSS類,注意要留有空格
}
</script>
</head>
<body>
<ul onclick="check()" class="myUL1">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
</body>
</html>
          注意：追加CSS類,注意要留有空格;
          ul標(biāo)記已經(jīng)設(shè)定了.myUL1類的樣式的情況下,oMy.className="myUL1 myUL2"不等同于oMy.className +=" myUL2",
          oMy.className="myUL1 myUL2"表現(xiàn)形式與oMy.className="myUL2"一樣; 因此應(yīng)當(dāng)采用oMy.className +=" myUl2";
          改變 HTML 樣式
          通過 HTML DOM，您能夠訪問 HTML 元素的樣式對(duì)象。
          下面的例子改變一個(gè)段落的 HTML 樣式：
          如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素（元素節(jié)點(diǎn)），然后把它追加到已有的元素上。
          <div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
          注意:經(jīng)過測(cè)試證明,para.appendChild(node);調(diào)換至最后一行,運(yùn)行正常
          最可行的方法:添加節(jié)點(diǎn)的順序,由內(nèi)到外(個(gè)人習(xí)慣);
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产精品资源一区二区|
国产一区二区精品久久岳√|
国产色精品vr一区区三区|
国产精品成人一区二区三区|
亚洲国产成人精品久久久国产成人一区二区三区综
|
久久99精品免费一区二区|
任你躁国产自任一区二区三区|
色窝窝无码一区二区三区成人网站
|
正在播放国产一区|
天码av无码一区二区三区四区|
三上悠亚亚洲一区高清|
亚洲AV无码一区二区三区人|
精品中文字幕一区在线|
色偷偷久久一区二区三区|
国产精品福利一区|
色国产精品一区在线观看|
性色AV 一区二区三区|
亚洲日韩AV一区二区三区四区|
国产在线视频一区|
国产福利无码一区在线|
国产一区二区三区免费观看在线|
亚洲国产AV无码一区二区三区|
精品一区二区三区四区在线|
无码喷水一区二区浪潮AV|
国产精品99精品一区二区三区
|
亚洲一区二区三区乱码A|
精品福利一区二区三区免费视频
|
亚洲Av永久无码精品一区二区
|
2020天堂中文字幕一区在线观|
成人h动漫精品一区二区无码|
国产精品伦一区二区三级视频|
国产亚洲福利一区二区免费看|
亚洲一区二区三区免费观看
|
久久久av波多野一区二区|
日本v片免费一区二区三区|
国精无码欧精品亚洲一区|
精品一区二区三区在线成人|
精品人妻少妇一区二区三区|
国产成人一区二区精品非洲|
亚洲欧洲无码一区二区三区|
国产99久久精品一区二区|