真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

JAVAScript學(xué)習(xí)3--DOM

通過(guò) HTML DOM，可訪問(wèn) JavaScript HTML 文檔的所有元素。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的寧夏網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

DOM能干啥？

????JavaScript 能夠改變頁(yè)面中的所有 HTML 元素
????JavaScript 能夠改變頁(yè)面中的所有 HTML 屬性
????JavaScript 能夠改變頁(yè)面中的所有 CSS 樣式
????JavaScript 能夠?qū)?yè)面中的所有事件做出反應(yīng)

當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（Document Object Model）。
HTML DOM 模型被構(gòu)造為對(duì)象的樹(shù)：

?

JAVAScript學(xué)習(xí)3--DOM

查找元素方法：

????1、直接查找：

? ? getElementByid():????通過(guò) id 找到 HTML 元素
????getElementsByTagName():????通過(guò)標(biāo)簽名找到 HTML 元素(列表)
????getElementsByClassName():????通過(guò)類名找到 HTML 元素(列表)

????getelementsByName():????通過(guò)name屬性找到HTML元素(列表)

????2、間接查找：

????parentNode ?父節(jié)點(diǎn)
????childNodes?? ? 所有子節(jié)點(diǎn)
????firstChild????? ? 第一個(gè)子節(jié)點(diǎn)
????lastChild?? ? 最后一個(gè)子節(jié)點(diǎn)
????nextSibling?? ? 下一個(gè)兄弟節(jié)點(diǎn)
????previousSibling ? 上一個(gè)兄弟節(jié)點(diǎn)
????parentElement?? ?父節(jié)點(diǎn)標(biāo)簽元素
????children???????? ?所有子標(biāo)簽
????firstElementChild ? 第一個(gè)子標(biāo)簽元素
????lastElementChild? ?最后一個(gè)子標(biāo)簽元素
????nextElementtSibling? ? 下一個(gè)兄弟標(biāo)簽元素
????previousElementSibling ? 上一個(gè)兄弟標(biāo)簽元素

????3、添加刪除節(jié)點(diǎn)和元素：


操作方法：

????innerText?? ?文本，指定ID下所有文本的拼接，去除間隔的HTML元素
????outerText??寫(xiě)模式下，替換所有子元素
????innerHTML?? ?會(huì)根據(jù)指定的值創(chuàng)建新的 DOM 樹(shù)，然后用這個(gè) DOM 樹(shù)完全替換調(diào)用元素原先的所有子節(jié)點(diǎn)。
????outerHTML?? ?寫(xiě)模式下，新的元素替換原有的 DOM 樹(shù)
????value?????? ??屬性可設(shè)置或返回密碼域的默認(rèn)值。獲取文本框的值。?

?

Class屬性操作(CSS樣式表名)：

????className?獲取所有類名
????classList.remove(cls)?刪除指定類
????classList.add(cls)? 添加類

checkbox屬性：

????checkbox.checked：true選中，false不選

tag標(biāo)簽操作：

????1、createElement()創(chuàng)建標(biāo)簽： ??

???????? 每個(gè)HTML標(biāo)簽都有自己的屬性，屬性參照：https://www.w3school.com.cn/jsref/dom_obj_anchor.asp

function?append_tag(){
???var?a?=?document.createElement('a')
???var?cur?=?document.getElementById('dd')
???a.innerHTML='click?me'
???a.
???a.className='a1'
???cur.appendChild(a)????//添加標(biāo)簽
}
\\----------等同于
var?a_tag="click?me"

????2、操作標(biāo)簽：

????

????insertAdjacentText('位置',obj)?在指定的地方插入文本內(nèi)容，如果是HTML對(duì)象會(huì)以文本形式顯示出來(lái)
????insertAdjacentHTML('位置',obj)?在指定的地方插入html內(nèi)容

????位置說(shuō)明：

????????beforeBegin：標(biāo)簽起始位置前（標(biāo)簽前）

????????afterBegin：標(biāo)簽起始位置后（標(biāo)簽內(nèi)）

????????beforeEnd：標(biāo)簽結(jié)束位置前（標(biāo)簽內(nèi)）

????????afterEnd：????標(biāo)簽結(jié)束位置后（標(biāo)簽外）

使用筆記本時(shí)上傳

????3、標(biāo)簽樣式操作style：

var?obj?=?document.getElementById('i1')
obj.style.fontSize?=?"32px";
obj.style.backgroundColor?=?"red";

????4、位置操作

????document.documentElement.offsetHeight??? 總文檔高度
????document.documentElement.clientHeight??? 當(dāng)前文檔占屏幕高度
????tag.offsetHeight??? 自身高度
????tag.offsetTop??? 距離上級(jí)定位高度
????tag.offsetParent?父定位標(biāo)簽
????tag.scrollTop?滾動(dòng)高度

/*
????clientHeight?->?可見(jiàn)區(qū)域：height?+?padding
????clientTop????->?border高度
????offsetHeight?->?可見(jiàn)區(qū)域：height?+?padding?+?border
????offsetTop????->?上級(jí)定位標(biāo)簽的高度
????scrollHeight?->?全文高：height?+?padding
????scrollTop????->?滾動(dòng)高度
????特別的：
????????document.documentElement代指文檔根節(jié)點(diǎn)
*/

?

事件：

????

????addEventListener() 方法用于向指定元素添加事件句柄。

????addEventListener() 方法添加的事件句柄不會(huì)覆蓋已存在的事件句柄。

????你可以向一個(gè)元素添加多個(gè)事件句柄。

????你可以向同個(gè)元素添加多個(gè)同類型的事件句柄，如：兩個(gè) "click" 事件。

????你可以向任何 DOM 對(duì)象添加事件監(jiān)聽(tīng)，不僅僅是 HTML 元素。如： window 對(duì)象。

????addEventListener() 方法可以更簡(jiǎn)單的控制事件（冒泡與捕獲）。

????當(dāng)你使用 addEventListener() 方法時(shí), ?JavaScript 從 HTML 標(biāo)記中分離開(kāi)來(lái)，可讀性更強(qiáng)， 在沒(méi)有控制HTML標(biāo)記時(shí)也可以添加事件監(jiān)聽(tīng)。

????你可以使用 removeEventListener() 方法來(lái)移除事件的監(jiān)聽(tīng)。

????語(yǔ)法：element.addEventListener(event, function, useCapture);

???

????事件類型：

屬性此事件發(fā)生在何時(shí)...屬性此事件發(fā)生在何時(shí)...
onabort圖像的加載被中斷。onload一張頁(yè)面或一幅圖像完成加載。
onblur元素失去焦點(diǎn)。onmousedown鼠標(biāo)按鈕被按下。
onchange域的內(nèi)容被改變。onmousemove鼠標(biāo)被移動(dòng)。
onclick當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。onmouseout鼠標(biāo)從某元素移開(kāi)。
ondblclick當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。onmouseover鼠標(biāo)移到某元素之上。
onerror在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤。onmouseup鼠標(biāo)按鍵被松開(kāi)。
onfocus元素獲得焦點(diǎn)。onreset重置按鈕被點(diǎn)擊。
onkeydown某個(gè)鍵盤(pán)按鍵被按下。onresize窗口或框架被重新調(diào)整大小。
onkeypress某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)。onselect文本被選中。
onkeyup某個(gè)鍵盤(pán)按鍵被松開(kāi)。onsubmit確認(rèn)按鈕被點(diǎn)擊。
onunload用戶退出頁(yè)面。

?鍵盤(pán)鼠標(biāo)事件：

屬性描述
altKey返回當(dāng)事件被觸發(fā)時(shí)，"ALT"是否被按下。
button返回當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊。
clientX返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。
clientY返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。
ctrlKey返回當(dāng)事件被觸發(fā)時(shí)，"CTRL"鍵是否被按下。
metaKey返回當(dāng)事件被觸發(fā)時(shí)，"meta"鍵是否被按下。
relatedTarget返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。
screenX返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。
screenY返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。
shiftKey返回當(dāng)事件被觸發(fā)時(shí)，"SHIFT"鍵是否被按下。

?

小例子：

1、文本框默認(rèn)文字

?2、添加標(biāo)簽
function?b_b(){ ????var?std=document.getElementById('std'); ????var?new_b=""; ????std.insertAdjacentHTML('beforeBegin',new_b); } function?a_b(){ ????var?std=document.getElementById('std'); ????var?new_b=""; ????std.insertAdjacentHTML('afterBegin',new_b); } function?b_e(){ ????var?std=document.getElementById('std'); ????var?new_b=""; ????std.insertAdjacentHTML('beforeEnd',new_b); } function?a_e(){ ???? ????var?std=document.getElementById('std'); ????var?new_b=""; ????std.insertAdjacentHTML('afterEnd',new_b); }

?3、展開(kāi)同時(shí)隱藏其它子菜單：

????????HTML：


????人員管理
???? ???????? ????
????組別管理 ???? ???????? ????

????????JS:

function?show_sub_menu(th){
????var?parentId?=?th.id;
????var?childId='s'+parentId;
????var?childE=document.getElementById('left_menu').children;
????for?(var?s?in?childE){
????????var?e=childE[s].classList;
????????console.log(e);
????????if?(e){
????????????if?(childE[s].id==childId){
????????????????childE[s].classList.add('show');
????????????}else{
????????????????childE[s].classList.remove('show');
????????????}
?????????}
????}
}

?4、標(biāo)簽提交：



????
????提交吧

?

?5、html、css、js頁(yè)面分離：生產(chǎn)環(huán)境的寫(xiě)法。

????? ?每類存儲(chǔ)為單獨(dú)的文件，其中js使用dom添加事件方法，可以html更簡(jiǎn)潔。

例子：鼠標(biāo)移動(dòng)表格行變色

????HTML：


????11111
????11111
????11111
????11111
????11111

?????JS:給table添加屬性和class

????var?t=document.getElementById('tb').classList;
????t.add('tb_style');
????
????var?mytrs=document.getElementsByTagName('tr');
????var?td_numbers=mytrs.length;
????for?(var?td=0;td
?????css:
.tb_style{
????bacground-color:pink;
}
?6、詞法分析：形參--》函數(shù)體內(nèi)函數(shù),編譯時(shí)函數(shù)體內(nèi)的函數(shù)會(huì)分配 內(nèi)存地址，覆蓋形參。
function?cifa(age){
????console.log(age);????????\\function?age
????age=22;
????console.log(age);????????\\22
????function?age(){};
????console.log(age);????????\\22
}

age(3)
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
            
            
                        

            網(wǎng)頁(yè)名稱：JAVAScript學(xué)習(xí)3--DOM            

            URL地址：http://weahome.cn/article/iighid.html
        
    






    

        

            
                
                
在線咨詢

            
        

    

    

        
微信咨詢

        

    

    

        
電話咨詢

        

            
028-86922220（工作日）

            
18980820575（7×24）

        

    

    

        

            
                
提交需求

            
        

    

    

        

            
                
返回頂部