當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript之document对象最常用相关知识总结
生活随笔
收集整理的這篇文章主要介紹了
JavaScript之document对象最常用相关知识总结
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript之document對象
- 一、document對象概念
- 二、JS獲取HTML元素對象
- 1、直接方式獲取HTML元素對象
- 1.1 通過id
- 1.2 通過name
- 1.3 通過標簽名
- 1.4 通過class屬性值
- 1.5 相關實例一
- 2、間接方式獲取HTML元素對象
- 2.1 父子關系
- 2.2 子父關系
- 2.3 兄弟關系
- 2.4 相關實例二
- 三、JS操作HTML元素屬性
- 1、 獲取元素屬性
- 1.1 場景一（函數的固有屬性）
- 1.2 場景二（函數的自定義屬性）
- 2、修改元素屬性
- 2.1 場景一（函數的固有屬性）
- 2.2 場景二（函數的自定義屬性）
- 3、使用自定義方式操作固有屬性
- 4、注意
- 5、實例
- 四、JS操作HTML元素內容
- 1、獲取元素內容
- 2、修改元素內容
- 3、實例
- 五、JS操作HTML元素樣式
- 1、通過style屬性操作元素樣式
- 2、通過className屬性操作元素樣式
- 3、實例
- 六、JS操作HTML的文檔結構
- 1、使用innerHTML操作文檔結構
- 2、實例一
- 3、通過獲取元素對象方式操作文檔結構
- 4、實例二
- 七、JS操作form表單
- 1、獲取form表單對象
- 1.1 方式一(使用id)
- 1.2 方式二(使用name屬性)
- 2、獲取form下的所有表單元素對象集合
- 3、form表單的常用方法
- 4、form的屬性操作
- 5、實例
- 6、js表單元素的通用屬性
一、document對象概念
瀏覽器對外提供的支持js的用來操作HTML文檔的一個document對象，此對象封存的HTML文檔的所有信息，瀏覽器在執行時，到達有document代碼這一行，操作的不是原HTML文檔，而是事先封裝的document對象。
二、JS獲取HTML元素對象
1、直接方式獲取HTML元素對象
1.1 通過id
//id方式 function testGetEleById(){var inp = window.document.getElementById("uname");alert(inp); }1.2 通過name
//name方式 function testGetEleByName(){var favs = document.getElementsByName("fav" );alert(favs.length); }1.3 通過標簽名
//標簽名 function testGetEleByTagName(){var inps = document.getElementsByTagName("input");alert(inps.length); }1.4 通過class屬性值
//class屬性 function testGetEleByClassName(){var inps = document.getElementsByClassName("common");alert(inps.length); }1.5 相關實例一
<!DOCTYPE html> <html lang = "en"> <head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device - width, initial - scale = 1.0"><meta http-equiv = "X-UA-Compatible" content = "ie-edge"><title>JavaScript之document對象學習</title><script>//document獲取元素對象//直接方式//id方式function testGetEleById(){var inp = window.document.getElementById("uname");alert(inp);}//name方式function testGetEleByName(){var favs = document.getElementsByName("fav" );alert(favs.length);}//標簽名function testGetEleByTagName(){var inps = document.getElementsByTagName("input");alert(inps.length);}//class屬性function testGetEleByClassName(){var inps = document.getElementsByClassName("common");alert(inps.length);}</script><style>.common{}#showdiv{border: solid 1px orange;width:300px;height:300px;}</style> </head> <body><h3>document對象的概念和獲取元素對象的學習</h3><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/> </body> </html>2、間接方式獲取HTML元素對象
2.1 父子關系
//父子關系 function testParent(){//獲取父級元素對象var showdiv = document.getElementById("showdiv");//獲取所有的子元素對象數組var childs = showdiv.childNodes;alert(childs.length); }2.2 子父關系
//子父關系 function testChild(){//獲取子元素對象var inp = document.getElementById("inp");//獲取子元素的父級元素對象var div = inp.parentNode;alert(div); }2.3 兄弟關系
//兄弟關系 function testBrother(){//兄獲取弟var inp = document.getElementById("inp");var preEle = inp.previousSibling; //弟獲取兄var nextEle = inp.nextSibling; //兄獲取弟alert(preEle + ":::" + nextEle); }2.4 相關實例二
<!DOCTYPE html> <html lang = "en"> <head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device - width, initial - scale = 1.0"><meta http-equiv = "X-UA-Compatible" content = "ie-edge"><title>JavaScript之document對象學習</title><script>//document獲取元素對象//間接獲取方式//父子關系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>.common{}#showdiv{border: solid 1px orange;width:300px;height:300px;}</style> </head> <body><h3>document對象的概念和獲取元素對象的學習</h3>間接獲取方式<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元素屬性
1、 獲取元素屬性
1.1 場景一（函數的固有屬性）
元素對象名.屬性名 //返回當前屬性的屬性值
function testField(){//獲取元素對象var inp = document.getElementById("uname");//獲取元素屬性值alert(inp.value); }1.2 場景二（函數的自定義屬性）
元素對象名.getAttribute(“屬性名”); //返回自定義屬性的值------自定義
function testOwnField(){//獲取元素對象var inp = document.getElementById("uname");//獲取自定義屬性的值(自己定義了一個abc)alert(inp.getAttribute("abc")); }2、修改元素屬性
2.1 場景一（函數的固有屬性）
元素對象名.屬性名 = 屬性值
function testField2(){//獲取元素對象var inp = document.getElementById("uname");//修改元素屬性inp.value = "哈哈"; }2.2 場景二（函數的自定義屬性）
元素對象名.setAttribute(“屬性名”,“屬性值”); //修改自定義屬性的值------自定義
function testOwnField2(){//獲取元素var inp = document.getElementById("uname");//修改自定義屬性的值inp.setAttribute("abc","吃飯"); }3、使用自定義方式操作固有屬性
//使用自定義方式操作固有屬性 function testOper(){//獲取元素對象var inp = document.getElementById("uname");//操作對象固有屬性alert(inp.getAttribute("value")); }4、注意
盡量不要去修改元素的id值和name屬性值
使用自定義方式獲取固有屬性內容，value的值獲取的是默認值，不能夠獲取到實時的用戶數據
5、實例
<!DOCTYPE html> <html lang = "en"> <head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device - width, initial - scale = 1.0"><meta http-equiv = "X-UA-Compatible" content = "ie-edge"><title>JavaScript之操作HTML的元素屬性</title><script>//聲明函數---固有屬性function testField(){//獲取元素對象var inp = document.getElementById("uname");//獲取元素屬性值alert(inp.type + ":" + inp.name + ":" + inp.id + ":" + inp.value);alert(inp.aa);}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元素內容
1、獲取元素內容
元素對象名.innerHTML //返回當前元素對象的所有內容，包括HTML標簽
元素對象名.innerText //返回當前元素對象的文本內容，不包括HTML標簽
2、修改元素內容
元素對象名.innerHTML=“新的值” //會將原有內容覆蓋，并HTML標簽會被解析
元素對象名.innerHTML=元素對象名.innerHTML+“新的值” //追加效果
元素對象名.innerText=“新的值” //會將原有內容覆蓋，但HTML標簽不會被解析，會作為普通文本顯示 0-*
3、實例
<!DOCTYPE html> <html lang = "en"> <head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device - width, initial - scale = 1.0"><meta http-equiv = "X-UA-Compatible" content = "ie-edge"><title>JavaScript之操作元素內容學習</title><style type="text/css">#div01{width:200px;height:200px;border: solid 1px orange;}</style><script>//獲取元素內容function getContext(){//獲取元素對象var div = document.getElementById("div01");//獲取元素內容//innerHTML獲取所有內容alert(div.innerHTML);//innerText獲取所有文本內容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元素樣式
1、通過style屬性操作元素樣式
元素對象名.style.樣式名=“樣式值” //添加或者修改
元素對象名.style.樣式名=“” //刪除樣式
注意: 以上操作，操作的是HTML的style屬性聲明中的樣式。而不是其他css代碼域中的樣式。
2、通過className屬性操作元素樣式
元素對象名.className=“新的值” //添加類選擇器樣式或者修改類選擇器樣式
元素對象名.className=“” //刪除類樣式
3、實例
<!DOCTYPE html> <html lang = "en"> <head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device - width, initial - scale = 1.0"><meta http-equiv = "X-UA-Compatible" content = "ie-edge"><title>JavaScript之輸入輸出語句</title><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><script>//js操作元素樣式//js給元素添加樣式--stylefunction testAddCss(){//獲取元素對象var showdiv = document.getElementById("showdiv");//添加元素樣式showdiv.style.backgroundColor = "#FFA500";//js修改元素樣式showdiv.style.border="solid 2px red";//js刪除樣式showdiv.style.border="";}//js操作樣式--classNamefunction 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="testAddCss()"/><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操作HTML的文檔結構
1、使用innerHTML操作文檔結構
div.innerHTML=div.innerHTML+“內容” //增加節點
div.innerHTML=“” //刪除所有子節點
父節點.removeChild(子節點對象) //刪除指定的子節點
2、實例一
<!DOCTYPE html> <html lang = "en"> <head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device - width, initial - scale = 1.0"><meta http-equiv = "X-UA-Compatible" content = "ie-edge"><title>JavaScript之操作元素的文檔結構</title><script>function testAdd(){//獲取元素對象var showdiv = document.getElementById("showdiv");//給div追加上傳按鈕showdiv.innerHTML = showdiv.innerHTML + "<div><input type='file' id=''' value=''/><input type='button' value='刪除' οnclick='delInp(this)'/></div>";}function delInp(btn){//獲取父級divvar showdiv = document.getElementById("showdiv");//獲取要刪除的子divvar cdiv = btn.parentNode;//父div刪除子divshowdiv.removeChild(cdiv);}</script> </head> <body><h3>js操作元素的文檔結構</h3><input type="button" name="" id="" value="繼續上傳" onclick="testAdd()"/><div id="showdiv"></div></body> </html>3、通過獲取元素對象方式操作文檔結構
var obj = document.createElement(“標簽名”);
元素對象名.appendChild(obj);
4、實例二
<!DOCTYPE html> <html lang = "en"> <head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device - width, initial - scale = 1.0"><meta http-equiv = "X-UA-Compatible" content = "ie-edge"><title>JavaScript之操作元素的文檔結構2</title><script>function testOper2(){//獲取元素對象var showdiv = document.getElementById("showdiv");//創建input元素對象var inp = document.createElement("input");inp.type = "file";//創建按鈕元素對象var btn = document.createElement("input");btn.type = "button";btn.value = "刪除";btn.onclick=function(){showdiv.removeChild(inp);showdiv.removeChild(btn);showdiv.removeChild(br);}//創建換行符var br = document.createElement("br");//將創建的元素對象存放到div中showdiv.appendChild(inp);showdiv.appendChild(btn);showdiv.appendChild(br);}</script> </head> <body><h3>js操作文檔結構2</h3><input type="button" name="" id="" value="繼續上傳" onclick="testOper2()"/><hr/><div id="showdiv"></div> </body> </html>七、JS操作form表單
1、獲取form表單對象
1.1 方式一(使用id)
var fm = document.getElementById(“fm”);
//獲取form表對象 var fm = document.getElementById("fm"); alert(fm);1.2 方式二(使用name屬性)
var frm = document.frm;
//使用form表單的name屬性值來獲取 var frm = document.frm; alert(frm);2、獲取form下的所有表單元素對象集合
fm.elements
//獲取form表單元素對象集合 alert(fm.elements.length);3、form表單的常用方法
表單對象.submit(); //提交表單數據
//form表單的常用方法 fm.submit();4、form的屬性操作
表單對象名.action=“新的值” //動態的改變數據的提交路徑
表單對象名.method=“新的值” //動態的改變提交方式
5、實例
<!DOCTYPE html> <html lang = "en"> <head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device - width, initial - scale = 1.0"><meta http-equiv = "X-UA-Compatible" content = "ie-edge"><title>JavaScript之操作form表單</title><script>function testForm(){//獲取form表對象var fm = document.getElementById("fm");alert(fm);//使用form表單的name屬性值來獲取var frm = document.frm;alert(frm);alert(frm===fm);//獲取form表單元素對象集合alert(fm.elements.length);//form表單的常用方法//fm.submit(); fm.reset();//form的屬性操作fm.action="http://www.baidu.com";}</script> </head> <body><h3>js操作form表單</h3><hr/><input type="button" name="" id="" value="測試操作form" onclick="testForm()"/><hr/><form action="#" method="get" id="fm" name="frm"><b>用戶名：</b><input type="text" name="uname" id="uname" value="" readonly="readonly"/><br/><br/>密碼：<input type="password" name="pwd" id="pwd" value="" disabled="disabled"/><br/><br/><input type="submit" name="" id="" value="登錄"/></form> </body> </html>6、js表單元素的通用屬性
只讀模式 readonly = "readonly" //不可以更改，但是數據可以提交 關閉模式 Sdisabled = "disabled" //不可以進行任何的操作，數據不會提交總結
以上是生活随笔為你收集整理的JavaScript之document对象最常用相关知识总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 组织分解结构(Organizationa
- 下一篇： 工作分解结构(Work Breakdow