javascript里的DOM知識(shí)分析

本文將為大家詳細(xì)介紹“javascript里的DOM知識(shí)分析”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“javascript里的DOM知識(shí)分析”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、澄邁網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為澄邁等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

JavaScript可以做什么

1.可以使網(wǎng)頁(yè)具有交互性，例如響應(yīng)用戶點(diǎn)擊，給用戶提供更好的體驗(yàn)。 2.可以處理表單，檢驗(yàn)用戶的輸入，并提供及時(shí)反饋節(jié)省用戶時(shí)間。 3.可以根據(jù)用戶的操作，動(dòng)態(tài)的創(chuàng)建頁(yè)面。 4使用JavaScript可以通過設(shè)置cookie存儲(chǔ)在瀏覽器上的一些臨時(shí)信息。

1、DOM ,Document/Object/Modul簡(jiǎn)寫，文檔對(duì)象模型，該模型為DOM元素節(jié)點(diǎn)樹。不同元素按一定的從屬關(guān)系構(gòu)成DOM元素節(jié)點(diǎn)樹。
javascript里的DOM知識(shí)分析
2.關(guān)于meta

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/> <!--告訴瀏覽器底下內(nèi)容按UTF-8解析 -->
    <!--以下給搜索引擎爬蟲識(shí)別文檔內(nèi)容，不設(shè)定不影響使用但影響網(wǎng)頁(yè)傳播涉及SEO-->
    <meta name="keywords" content="Javascript,HTML,css,XML,XHTML"/>
    <meta name="description" content="Javascript學(xué)習(xí)">
    <meta name="author" content="Hehongchang">

3.css
3.1內(nèi)聯(lián)樣式在元素中使用style屬性，優(yōu)先級(jí)最高；

<style type="text/css">
        p {
            color: blue;
        }
    </style>
</head>
<body>
<p style="color:red;">內(nèi)聯(lián)樣式</p>//顯示紅色

其次是id的高于class，class高于元素，其中，p.ysb高于.ysb寫法
javascript里的DOM知識(shí)分析

3.2內(nèi)部樣式在HTML 頭部中使用

<style type="text/css">
        #p{
            width: 20px;
            height: 20px;
            position: relative;
            background: red;
        }
    </style> -->

3.3 外部引用，外部引用css文件
新建css文件，將css部分放入文件，在原HTML中調(diào)用，調(diào)用必須在head中
javascript里的DOM知識(shí)分析
4.chrome可以作為有力的css調(diào)試器
可以直接在Style中進(jìn)行勾選和修改

5.document對(duì)象
認(rèn)識(shí)document操作DOM元素
document為window下的函數(shù)，掛在HTMLDocument上的實(shí)例，使用document下的函數(shù)對(duì)dom元素進(jìn)行選擇和操作。

console.log(window.document);

//該函數(shù)在IE8及以下瀏覽器，不區(qū)分大小寫，但chrome是區(qū)分的，同時(shí)匹配name
javascript里的DOM知識(shí)分析
document對(duì)象下的函數(shù)

getElementById（string）（注意element沒有s）返回一個(gè)唯一的id指，getElementsByClassName（string），getElementsByTagName（string），getElementsByName（string）返回一個(gè)類數(shù)組。
javascript里的DOM知識(shí)分析

var ps2 = document.getElementsByClassName('cls1');
console.log(ps2);

javascript里的DOM知識(shí)分析
document.getElementsByTagName（‘’）返回所有標(biāo)簽的類數(shù)組
getElementsByName name屬性只對(duì)部分元素有效，form，img，iframe，表單元素

javascript里的DOM知識(shí)分析

6.querySelector(string)返回指定的第一個(gè)元素

document.querySelector('.cls1').style.color= 'red';//js中凡是涉及CSS或HTML的屬性值及屬性均需要加 ‘’；
document.querySelector('.cls1')指獲得.cls1元素

javascript里的DOM知識(shí)分析

document.querySelector(‘form input’).style.color= ‘red’;獲得form input第一個(gè)元素；

7.querySelectorAll()返回一個(gè)數(shù)組所有

var all = document.querySelectorAll('form input');
console.log(all);
all[0].style.color='red';
all[2].style.color='green';

javascript里的DOM知識(shí)分析
8.DOM Node 加深對(duì)整個(gè)DOM tree的理解
節(jié)點(diǎn)包括元素和非元素，元素只是節(jié)點(diǎn)的一部分，其中不限于：常用

練習(xí)：遍歷DOM tree
任何一個(gè)Node節(jié)點(diǎn)底下都有一個(gè)childNodes（包括該節(jié)點(diǎn)所有的子節(jié)點(diǎn)數(shù)組）和children（只有元素），一層嵌一層，元素可有attributes（數(shù)組屬性值對(duì)）。
node里面包括nodeType，nodeName，nodeValue，前面的序號(hào)表示節(jié)點(diǎn)類型，元素 1，屬性2，文本3，注釋8，Document 9，Document Type 10

function goThrough(node,x){
    if(node.childNodes!= undefined){
        for(var i = 0; i < node.childNodes.length; i++){//node.childNotes數(shù)組
            var a = node.childNodes[i];
            var s = a.nodeType + '-' + a.nodeName + '-' + a.nodeValue + '-';//加‘-’讓回車原形畢露，回車也是一個(gè)文字節(jié)點(diǎn)。
            console.log(x + s);
            var attri ='{attri:';
            if(a.attributes != undefined && a.attributes.length != 0){
                for(var j = 0; j < a.attributes.length;j++){
                var b = a.attributes[j];
                attri += b.nodeType + '-' + b.nodeName + '-' + b.nodeValue;
                
                }
                attri +='}';
                console.log(x + attri);
            }
            goThrough(a, x + '\t');
        }
        
    }
}
goThrough(document,'\t');

javascript里的DOM知識(shí)分析
注意：從處開始以后每一個(gè)回車都是一個(gè)文字節(jié)點(diǎn) 3-#text- -，

開頭沒有
練習(xí) 過濾body里所有的元素

function getChildrens(element){
    var Childrens = [];
    if(element.childNodes != undefined){
        for(var i = 0; i < element.childNodes.length; i++){
            var a = element.childNodes[i];
            if(a.nodeType == 1){
                Childrens.push(a);
            }
        }
    }
    return Childrens;
}

console.log(getChildrens(document.body));

javascript里的DOM知識(shí)分析

如果你能讀到這里，小編希望你對(duì)“javascript里的DOM知識(shí)分析”這一關(guān)鍵問題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：javascript里的DOM知識(shí)分析
分享路徑：http://muchs.cn/article6/ihdcog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司、虛擬主機(jī)、電子商務(wù)、App開發(fā)、微信公眾號(hào)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容