getElementById

document.getElementById(id)
取得 id 的元素

<pre><b>document.getElementById()</b> <div id="div1">html.ug5g.com My id = div1</div> <input type="button" onclick="div1.style.color='red'" value='document.getElementById("div1").style.color="red"' /> <input type="button" onclick="div1.style.color='blue'" value='document.getElementById("div1").style.color="blue"' /> <input type="button" onclick="div1.style.color='darkorange'" value= 'document.getElementById("div1").style.color="darkorange"' /> <input type="button" onclick="div1.style.fontSize ='20px'" value='document.getElementById("div1").style.fontSize ="20px"' /> <input type="button" onclick="div1.style.fontSize ='30px'" value='document.getElementById("div1").style.fontSize ="30px"' /> <input type="button" onclick="div1.style.fontSize ='40px'" value= 'document.getElementById("div1").style.fontSize ="40px"' /> </pre> <style> b { font-size:30px;color:blue; } input { font-size:20px;color:black;width: 600px;cursor:pointer } #div1 { font-size:20px;color:blue;height:100px; } </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

<pre><b>document.getElementsByName()</b> <span name="Name"><<c>div name="Name"><<c>/div></span > <span name="Name"><<c>p name="Name"><<c>/p></span > <span name="Name"><<c>span name="Name"><<c>/span></span> <span name="Name"><<c>h1 name="Name"><<c>/h1></span > <div id="dp"></div> </pre> <script> var xx= document.getElementsByName("Name") ; var txt="" ; txt += 'var xx= document.getElementsByName("Name")' ; txt += '\nxx.length = '+ xx.length; txt += '\nxx[0].innerHTML= '+ xx[0].innerHTML; txt += '\nxx[1].innerHTML= '+ xx[1].innerHTML; txt += '\nxx[2].innerHTML= '+ xx[2].innerHTML; txt += '\nxx[3].innerHTML= '+ xx[3].innerHTML; dp.innerHTML = txt; </script> <style> pre { font-size:20px } b { font-size:30px;color:blue; } </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

<pre><b>document.getElementsByClassName()</b> <span class="CLASS"><<c>div class="CLASS"><<c>/div></span > <span class="CLASS"><<c>p class="CLASS"><<c>/p></span > <span class="CLASS"><<c>span class="CLASS"><<c>/span></span> <span class="CLASS"><<c>h1 class="CLASS"><<c>/h1></span > <div id="dp"></div> </pre> <script> var xx= document.getElementsByClassName("CLASS") ; var txt="" ; txt += 'var xx= document.getElementsByName("CLASS")' ; txt += '\nxx.length = '+ xx.length; txt += '\nxx[0].innerHTML = '+ xx[0].innerHTML; txt += '\nxx[1].innerHTML = '+ xx[1].innerHTML; txt += '\nxx[2].innerHTML = '+ xx[2].innerHTML; txt += '\nxx[3].innerHTML = '+ xx[3].innerHTML; dp.innerHTML = txt; </script> <style> pre { font-size:20px } b { font-size:30px;color:blue; } </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

<pre><b>document.getElementsByTagName()</b> <span><<c>span>11<<c>/span></span> <span><<c>span>22<<c>/span></span> <span><<c>span>33<<c>/span></span> <span><<c>span>44<<c>/span></span> <div id="dp"></div> </pre> <script> var xx= document.getElementsByTagName("span") ; var txt="" ; txt += 'var xx= document.getElementsByName("span")' ; txt += '\nxx.length = '+ xx.length; txt += '\nxx[0].innerHTML = '+ xx[0].innerHTML; txt += '\nxx[1].innerHTML = '+ xx[1].innerHTML; txt += '\nxx[2].innerHTML = '+ xx[2].innerHTML; txt += '\nxx[3].innerHTML = '+ xx[3].innerHTML; dp.innerHTML = txt; </script> <style> pre { font-size:20px } b { font-size:30px;color:blue; } </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

Edit

#html #網頁格式 #script #style #div #script 元素獲取 getElementById() #script 元素獲取 getElementsByClassName() #script 元素獲取 getElementsByTagName() #script 元素獲取 getElementsByName() #script getElementById() #script getElementsByClassName() #script getElementsByTagName() #script getElementsByName()