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