當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaScript】Document对象学习
生活随笔
收集整理的這篇文章主要介紹了
【JavaScript】Document对象学习
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Document 對(duì)象
當(dāng)瀏覽器載入 HTML 文檔, 它就會(huì)成為 Document 對(duì)象。
Document 對(duì)象是 HTML 文檔的根節(jié)點(diǎn)。
Document 對(duì)象使我們可以從腳本中對(duì) HTML 頁面中的所有元素進(jìn)行訪問。
提示：Document 對(duì)象是 Window 對(duì)象的一部分，可通過 window.document 屬性對(duì)其進(jìn)行訪問。
因此，可以通過js在html里面憑空創(chuàng)造一個(gè)標(biāo)簽出來。
js的document對(duì)象學(xué)習(xí)-基本概念和常用選擇器
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>document對(duì)象學(xué)習(xí)</title><!--document對(duì)象學(xué)習(xí):1、document對(duì)象的概念瀏覽器對(duì)外提供的支持js的用來操作HTML文檔的一個(gè)對(duì)象，此對(duì)象封存的HTML文檔的所有信息。2、使用document獲取HTML元素對(duì)象直接獲取方式：通過id通過name屬性值通過標(biāo)簽名通過class屬性值間接獲取方式：父子關(guān)系子父關(guān)系兄弟關(guān)系--><!--聲明js代碼域--><script type="text/javascript">//document獲取元素對(duì)象//直接方式//id方式function testGetEleById(){var inp=window.document.getElementById("uname");alert(inp);} //name方式function testGetEleByName(){var favs=document.getElementsByName("fav");alert(favs);} //標(biāo)簽名function testGetEleByTagName(){var inps=document.getElementsByTagName("input");alert(inps);}//class屬性function testGetEleByClassName(){var inps=document.getElementsByClassName("common");alert(inps.length);}//間接獲取方式//父子關(guān)系function testParent(){//獲取父級(jí)元素對(duì)象var showdiv=document.getElementById("showdiv");//獲取所有的子元素對(duì)象數(shù)組var childs=showdiv.childNodes;alert(childs.length);}//子父關(guān)系function testChild(){//獲取子元素對(duì)象var inp=document.getElementById("inp");var div=inp.parentNode;alert(div);}//兄弟關(guān)系function testBrother(){var inp=document.getElementById("inp");var preEle= inp.previousSibling;//弟獲取兄var nextEle=inp.nextSibling;//兄獲取弟alert(preEle+"---"+nextEle);}</script><style type="text/css">.common{}#showdiv{border: solid 2px orange;width: 300px;height: 300px;}</style></head><body><h3>document對(duì)象的概念和獲取元素對(duì)象學(xué)習(xí)</h3>直接獲取方式學(xué)習(xí)：<br /><input type="button" name="" id="" value="測(cè)試獲取HTML元素對(duì)象--id" onclick="testGetEleById()" /><input type="button" name="" id="" value="測(cè)試獲取HTML元素對(duì)象---name" onclick="testGetEleByName()" /><input type="button" name="" id="" value="測(cè)試獲取HTML元素對(duì)象---TagName" onclick="testGetEleByTagName()" /><input type="button" name="" id="" value="測(cè)試獲取HTML元素對(duì)象---className" onclick="testGetEleByClassName()" /><hr />用戶名：<input type="text" name="uname" id="uname" value="" /><br /><br /><input type="checkbox" name="fav" id="fav" value="" class="common"/>唱歌<input type="checkbox" name="fav" id="fav" value="" class="common"/>跳舞<input type="checkbox" name="fav" id="fav" value="" />睡覺<input type="checkbox" name="fav" id="fav" value="" />打游戲<hr />間接獲取方式學(xué)習(xí)：<br /><input type="button" name="" id="" value="測(cè)試父子關(guān)系" onclick="testParent()"/><input type="button" name="" id="" value="測(cè)試子父關(guān)系" onclick="testChild()"/><input type="button" name="" id="" value="測(cè)試兄弟關(guān)系" onclick="testBrother()"/><hr /><div id="showdiv"><input type="" name="" id="" value="" /><input type="" name="" id="inp" value="" /><input type="" name="" id="" value="" /><input type="" name="" id="" value="" /><input type="" name="" id="" value="" /><input type="" name="" id="" value="" /></div></body> </html>js操作HTML的元素屬性
<html><head><title>js操作HTML的元素屬性</title><meta charset="UTF-8"/><!--js操作HTML元素屬性學(xué)習(xí)：獲取元素對(duì)象操作元素屬性獲取：元素對(duì)象名.屬性名//返回當(dāng)前屬性的屬性值。----固有元素對(duì)象名.getAttribute("屬性名");//返回自定義屬性的值-----自定義*如果非要用元素對(duì)象名.getAttribute("屬性名")的方式去獲取固有屬性的值，一般是拿不到用戶輸入的內(nèi)容的，而其他在html中已經(jīng)寫好的屬性，比如name屬性，是可以拿到的。因此一般不會(huì)用getAttribute的方式去獲取固有屬性的值。修改元素對(duì)象名.屬性名=屬性值元素對(duì)象名.setAttribute("屬性名","屬性值");//修改自定義屬性的值----自定義注意：盡量的不要去修改元素的id值和name屬性值。使用自定義方式獲取固有屬性內(nèi)容，value的值獲取的是默認(rèn)值，不能夠獲取到實(shí)時(shí)的用戶數(shù)據(jù)。--><!--聲明js代碼域--><script type="text/javascript">//聲明函數(shù)---固有屬性//獲取屬性值function testField(){//獲取元素對(duì)象var inp=document.getElementById("uname");//獲取元素屬性值alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value); }//修改元素屬性值function testField2(){//獲取元素對(duì)象var inp=document.getElementById("uname");//修改元素屬性inp.value="哈哈";inp.type="button";}//聲明函數(shù)---自定義屬性//獲取function testOwnField(){//獲取元素對(duì)象var inp=document.getElementById("uname");//獲取自定義屬性的值alert(inp.getAttribute("abc"));}//修改function testOwnField2(){//獲取元素對(duì)象var inp=document.getElementById("uname");//修改自定義屬性的值inp.setAttribute("abc","呵呵");}//使用自定義方式操作固有屬性function testOper(){//獲取元素對(duì)象var inp=document.getElementById("uname");//操作對(duì)象屬性alert(inp.getAttribute("type"));alert(inp.getAttribute("value"));}</script></head><body><h3>js操作HTML的元素屬性</h3><input type="button" name="" id="" value="測(cè)試獲取元素屬性--固有" onclick="testField()" /><input type="button" name="" id="" value="測(cè)試修改元素屬性--固有" onclick="testField2()" /><input type="button" name="" id="" value="測(cè)試獲取元素屬性--自定義" onclick="testOwnField()" /><input type="button" name="" id="" value="測(cè)試修改元素屬性--自定義" onclick="testOwnField2()" /><input type="button" name="" id="" value="測(cè)試操作元素自定義操作固有屬性" onclick="testOper()" /><hr />用戶名 : <input type="text" name="uname" id="uname" value="" abc="嘿嘿"/></body> </html>JS操作元素的內(nèi)容
<html><head><title>js操作元素內(nèi)容學(xué)習(xí)</title><meta charset="UTF-8"/><!--聲明css--><style type="text/css">#div01{width: 200px;height: 200px;border: solid 1px orange;} </style><!--操作元素內(nèi)容學(xué)習(xí)：獲取元素對(duì)象獲取元素對(duì)象名.innerHTML//返回當(dāng)前元素對(duì)象的所有內(nèi)容，包括HTML標(biāo)簽元素對(duì)象名.innerHTML//返回當(dāng)前元素對(duì)象的文本內(nèi)容，不包括HTML標(biāo)簽修改元素對(duì)象名.innerHTML="新的值"//會(huì)將原有內(nèi)容覆蓋，并HTML標(biāo)簽會(huì)被解析元素對(duì)象名.innerHTML=元素對(duì)象名.innerHTML+"新的值"//追加效果元素對(duì)象名.innerText="新的值"//會(huì)將原有內(nèi)容覆蓋，但HTML標(biāo)簽不會(huì)被解析，會(huì)作為普通文本顯示。 --><!--聲明js代碼域--><script type="text/javascript">//獲取元素內(nèi)容function getContext(){//獲取元素對(duì)象var div=document.getElementById("div01");//獲取元素內(nèi)容alert(div.innerHTML);alert(div.innerText);}//修改元素內(nèi)容function updateContext(){//獲取元素對(duì)象var div=document.getElementById("div01");//修改元素對(duì)象內(nèi)容div.innerHTML="<b>你先上，皇軍給你殿后，八嘎</b>";}function updateContext2(){//獲取元素對(duì)象var div=document.getElementById("div01");//修改元素對(duì)象內(nèi)容div.innerText="<b>你先上，皇軍給你殿后，八嘎</b>";}</script></head><body><h3>js操作元素內(nèi)容學(xué)習(xí)</h3><input type="button" name="" id="" value="測(cè)試獲取元素內(nèi)容---innerHTML&innerText" onclick="getContext()"/><input type="button" name="" id="" value="測(cè)試修改元素內(nèi)容--innerHTML" onclick="updateContext()"/><input type="button" name="" id="" value="測(cè)試修改元素內(nèi)容--innerText" onclick="updateContext2()"/><hr /><div id="div01"><b>皇軍，前面有八路的干活。</b><b>皇軍，前面有八路的干活。</b></div></body> </html>JS操作元素的樣式
常用于：看小說調(diào)整背景顏色、字體大小等。
<html><head><title>js操作元素的樣式</title><meta charset="UTF-8"/><!--聲明css--><style type="text/css">#showdiv{width: 200px;height: 200px;border: solid 1px;}.common{width: 200px;height: 200px;border: solid 1px;}.common2{width: 200px;height: 200px;border: solid 1px;background-color: aqua;}</style><!--js操作元素樣式：獲取元素對(duì)象通過style屬性元素對(duì)象名.style.樣式名="樣式值"//添加或者修改（樣式名記憶方式：原樣式名的短橫線去掉，名字變成駝峰）元素對(duì)象名.style.樣式名=""//刪除樣式注意:以上操作，操作的是HTML的style屬性聲明中的樣式。而不是其他css代碼域中的樣式。通過className元素對(duì)象名.className="新的值"//添加類選擇器樣式或者修改類選擇器樣式元素對(duì)象名.className=""//刪除類樣式。--><!--聲明js代碼域--><script type="text/javascript">//js操作元素樣式//js給元素操作樣式---stylefunction testOperCss(){//獲取元素對(duì)象var showdiv=document.getElementById("showdiv");//添加元素樣式showdiv.style.backgroundColor="#FFA500";//js修改元素樣式showdiv.style.border="solid 2px red";//js刪除樣式showdiv.style.border="";}//js操作樣式--className function testOperCss2(){//獲取元素對(duì)象var div01=document.getElementById("div01");//獲取alert(div01.className);//添加或者修改div01.className="common2";//刪除div01.className="";} </script></head><body><h3>js操作元素的樣式</h3><input type="button" name="" id="" value="測(cè)試操作元素樣式--style" onclick="testOperCss()" /><input type="button" name="" id="" value="測(cè)試操作元素樣式--className" onclick="testOperCss2()" /><hr /><div id="showdiv" style="border: solid 2px blue;"></div><div id="div01" class="common"></div></body> </html>js event對(duì)象學(xué)習(xí)
<html><head><title>event對(duì)象學(xué)習(xí)</title><meta charset="UTF-8"/><!--event對(duì)象學(xué)習(xí)：1、event對(duì)象獲取鼠標(biāo)坐標(biāo)2、event對(duì)象獲取鍵盤值--><style type="text/css">#showdiv{width: 300px;height: 300px;border: solid 1px;} </style><script type="text/javascript">function getMouse(event){//獲取event對(duì)象var eve=event || window.event;//因?yàn)闉g覽器差異問題，使用此種方式獲取event對(duì)象var x=eve.clientX;var y=eve.clientY;alert(x+":"+y); }function getKey(event){//獲取event對(duì)象var eve=event || window.event;//因?yàn)闉g覽器差異問題，使用此種方式獲取event對(duì)象var code=eve.keyCode;alert(code);}</script></head><body><h3>event對(duì)象學(xué)習(xí)</h3><hr /><div id="showdiv" onmousemove="getMouse(event)"></div><br /><br /><input type="text" name="" id="" value="" onkeydown="getKey(event)"/></body> </html>總結(jié)
以上是生活随笔為你收集整理的【JavaScript】Document对象学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Python】Flask框架系列（一）
- 下一篇： 在JS中如何判断undefined和nu