前端逼死強迫症之DOM

時間 2019-12-13

標籤前端強迫症 dom 欄目 HTML 简体版

原文原文鏈接

Dom：document。至關於把全部的html文件，轉換成了文檔對象。javascript

以前說過：html-裸體的人；css-穿上衣服；js-讓人動起來。
讓人動起來，就得先找到他，再修改它內容或屬性。css

找到標籤
操做標籤
事件

1、查找元素

1.直接查找

document.getElementById('i1')           根據ID獲取一個元素
document.getElementsByTagName('div')    根據標籤名獲取標籤集合
document.getElementsByClassName('div')  獲取class多個元素(列表)
document.getElementsByName              獲取name多個元素(列表)

2.間接查找

parentNode          // 父節點
childNodes          // 全部子節點
firstChild          // 第一個子節點
lastChild           // 最後一個子節點
nextSibling         // 下一個兄弟節點
previousSibling     // 上一個兄弟節點

parentElement           // 父節點標籤元素
children                // 全部子標籤
firstElementChild       // 第一個子標籤元素
lastElementChild        // 最後一個子標籤元素
nextElementtSibling     // 下一個兄弟標籤元素
previousElementSibling  // 上一個兄弟標籤元素

2、操做標籤

1.內容操做

標籤.innerText        獲取標籤中的文本內容
標籤.innerText = ""   對標籤內部文本進行從新複製
outerText
innerHTML             HTML內容
innerHTML  
value                 值

2.樣式操做

className
    tag.className='c1'            直接總體作操做
    tag.classList.add('c2')       添加指定樣式
    tag.classList.remove('c2')    刪除指定樣式

PS：onclick點擊操做
    <div onclick='func();'>點我</div>
    <script>
        function func(){
        }
    </script>

className   // 樣式，返回字符串
classList   // 樣式，返回數組
classList.add()     // 添加樣式
classList.remove()  // 移出樣式

更細力度設置樣式

 obj.style.fontSize = '16px';    
 obj.style.backgroundColor = 'red';
 obj.style.color = "red"

3.屬性操做

setAttribute(key,value)   // 設置標籤屬性
removeAttribute(key)      // 移除標籤屬性
attributes                // 獲取全部標籤屬性
getAttribute(key)         // 獲取指定標籤屬性

建立標籤，並添加到HTML中： html

a. 字符串形式
b. 對象的方式
document.createElement(‘div’)

<body>
    <input type="button" onclick="AddEle1();" value="+" />
    <input type="button" onclick="AddEle2();" value="+" />
    <div id="i1">
        <p><input type="text" /></p>
    </div>
    <script>
        // 第一種添加方式：字符串形式
        function AddEle1(){
            // 建立一個標籤
            // 將標籤添加到i1裏面
            var tag = "<p><input type='text'/></p>";
            // 注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
        // 第二種添加方式：對象的方式
        function AddEle2(){
            // 建立一個標籤
            // 將標籤添加到i1裏面
            var tag = document.createElement('input');
            tag.setAttribute('type', 'text');
            tag.style.fontSize = '16px';
            tag.style.color = 'red';

            var p = document.createElement('p');
            p.appendChild(tag);
            document.getElementById('i1').appendChild(p);
        }
    </script>
</body>

View Code

4.提交表單

默認狀況下：只有多行文本textarea、下拉框select 和input 標籤能夠數據提交到後臺。java

經過DOM任何標籤均可提交表單。數組

<body>
    <form id="f1" action="http://www.cnblogs.com/lixiaoliuer/p/7155938.html">
        <input type="text" />
        <input type="submit" value="提交1" />
        <a onclick="submitForm();">提交2</a>
    </form>
    <script>
        function submitForm(){
            document.getElementById("f1").submit()
        }
    </script>
</body>

5.其餘操做

console.log                // 輸出框
alert                      // 彈出框
confirm                    // 確認框
// URL和刷新
location.href              // 獲取當前URL
location.href = "url"      // 設置URL 重定向
location.reload()          // 從新加載，刷新
// 定時器
setInterval                // 屢次定時器
clearInterval              // 清除屢次定時器
setTimeout                 // 單次定時器
clearTimeout               // 清除單次定時器

<body>
    <form id="f1" action="http://www.oldboyedu.com">
        <input type="text" />
        <input type="submit" value="提交1" />
        <a onclick="submitForm();">提交2</a>
    </form>
    <script>
        function submitForm(){
            //document.getElementById('f1').submit()
            //alert(123);
            var v = confirm('真的要提交嗎？');
            console.log(v);
            // v 鼠標點擊肯定、取消的返回值。
        }
        // 定時器，一直執行
        var obj = setInterval(function(){
            console.log(1);
            clearInterval(obj);  // 清除定時器
        }, 1000);
        // 定時器，只執行一次
        setTimeout(function () {
            console.log('timeout');
        },15000);
    </script>
</body>

瀏覽器console日誌中，看運行輸出信息

<body>
    <div id="status"></div>
    <input type="button" value="刪除" onclick="DeleteEle();" />
    <script>
        function  DeleteEle(){
            document.getElementById('status').innerText = "已刪除";
            setTimeout(function () {
                    document.getElementById('status').innerText = "";
            }, 3000);
        }
    </script>
</body>

刪除顯示信息，顯示3秒後自動消失

3、事件

1.行爲樣式結果相分離的頁面

實現表格，鼠標移上去後，變色

<body>
<table border="1" width="300px">
    <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>2</td></tr>
    <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>2</td></tr>
    <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>2</td></tr>
</table>
    <script>
        function t1(n){
            var myTrs = document.getElementsByTagName("tr")[n];
//            console.log(myTrs);
            myTrs.style.backgroundColor = "red";
        }
        function t2(n){
            var myTrs = document.getElementsByTagName("tr")[n];
            myTrs.style.backgroundColor = "";
        }
    </script>
</body>

View Code

優化後 —> 行爲(js) 樣式(css) 結構(html) 相分離

<body>
<table id="i1" border="1" width="300px">
    <tr><td>1</td><td>2</td><td>2</td></tr>
    <tr><td>1</td><td>2</td><td>2</td></tr>
    <tr><td>1</td><td>2</td><td>2</td></tr>
</table>
    <script>
        var myTrs = document.getElementsByTagName("tr");
        var len = myTrs.length;
        for(var i=0;i<len;i++){
            myTrs[i].onmouseover = function(){
                 // 誰調用這個函數，this指向誰
                 this.style.backgroundColor = "red";
            };
            myTrs[i].onmouseout = function(){
                this.style.backgroundColor = "";
            }
        }
    </script>
</body>

2.綁定事件的兩種方式

a. 直接標籤綁定 onclick=’xxx()’ onfocus
b. 先獲取Dom對象，而後進行綁定

- document.getElementById(‘xx’).onclick
- document.getElementById(‘xx’).onfocus

a. 第一種綁定方式：直接標籤綁定瀏覽器

<input id='i1' type='button' onclick='ClickOn(this)'>

function ClickOn(ths){
    // ths(形參) 當前點擊的標籤
}

b. 第二種綁定方式：先獲取Dom對象，而後進行綁定app

<input id='i1' type='button' >
document.getElementById('i1').onclick = function(){
    // this 代指當前點擊的標籤
}

注意this這裏不要亂用，兩種綁定方式不一樣，this傳入的時候也是不一樣的ide

c. 第三種綁定方式：同時綁定多個事件函數

 <script>
        var mydiv = document.getElementById("i1");
        mydiv.addEventListener('click',function(){console.log('aaa'),false});
        mydiv.addEventListener('click',function(){console.log('bbb'),false});
    </script>

鼠標點擊，同時執行以上兩個，操做。第三個參數：默認就是false，false：冒泡模型；true：捕捉模型優化

3.做用域示例

var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
    // i=0,i=1,i=2
    myTrs[i].onmouseover = function(){
        this.style.backgroundColor = "red";
        // myTrs[i].style.backgroundColor = "red";
        // 爲何這裏必須用this，不能用myTrs[i]？ 由於做用域不一樣，js是以函數做爲做用域的
    };
}