Dom操做

時間 2019-11-09

標籤 dom 欄目 HTML 简体版

原文原文鏈接

基礎

Dom 即documentjavascript

1、找到標籤：
　　獲取單個元素               document.getElementById('i1');
　　獲取多個元素（列表）  　　　　document.getElementsByTagName（‘div’）;
　　獲取多個元素（列表） 　　 　　document.getElementsByClassName（‘div’）; 2、操做標籤：
　　獲取標籤中的文本內容：
　　　　標籤.innerText
　　對標籤內容賦值：
　　　　標籤.innerText = ‘’

示例html

document.getElementById('i1')
<div id="i1">歡迎來到這裏</div>

document.getElementById('i1').innerText
"歡迎來到這裏"

document.getElementById('i1').innerText = 'test javascript'
"test javascript"

document.getElementsByTagName('a')
(3) [a, a, a]length: 30: a1: a2: a__proto__: HTMLCollection

document.getElementsByTagName('a')[0]
<a>532</a>

document.getElementsByTagName('a')[1]
<a>213123</a>

document.getElementsByTagName('a')[2]
<a>343415</a>

for (var i=0;i<document.getElementsByTagName('a').length;i++){document.getElementsByTagName('a')[i].innerText=8888;}
8888

Dom操做之間接查找

parentNode          // 父節點

childNodes          // 全部子節點

firstChild          // 第一個子節點

lastChild           // 最後一個子節點

nextSibling         // 下一個兄弟節點

previousSibling     // 上一個兄弟節點

parentElement           // 父節點標籤元素

children                // 全部子標籤

firstElementChild       // 第一個子標籤元素

lastElementChild        // 最後一個子標籤元素

nextElementtSibling     // 下一個兄弟標籤元素

previousElementSibling  // 上一個兄弟標籤元素

示例java

當前標籤內裏的文本內容app

classname 直接對樣式總體作操做dom

tag
<div id="i6">間接test javascript</div>

tag.classList
[value: ""]

tag.className='c1';
"c1"

tag.classList
["c1", value: "c1"]

tag <div id="i6" class="c1">間接test javascript</div>

tag.className='c2';
"c2"

tag
<div id="i6" class="c2">間接test javascript</div>

tag.classList.add('c3')
undefined

tag <div id="i6" class="c2 c3">間接test javascript</div>

tag.classList.remove('c2')
undefined

tag <div id="i6" class="c3">間接test javascript</div>

dom操做之搜索框關鍵字清空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <input id="i1" onfocus="Focus();" onblur="focus2();" type="text" value="請輸入關鍵字" />
    </div>
    <script>
        function Focus() {
            var tag = document.getElementById("i1");
            var val = tag.value;
            if(val == "請輸入關鍵字"){
                tag.value="";
            }
        }

        function focus2() {
            var tag = document.getElementById("i1");
            var val = tag.value;
            if(val.length==0){
                tag.value="請輸入關鍵字";
            }
        }
    </script>
</body>
</html>

dom基礎樣式操做

innerText   文本
outerText
innerHTML   HTML內容
innerHTML  
value      
input     value獲取當前標籤中的值
select     獲取選中的value的值
textarea    value獲取當前標籤中的值

示例函數

class操做this

className                // 獲取全部類名

classList.remove(cls)    // 刪除指定類

classList.add(cls)       // 添加類

obj = document.getElementById('i3')
obj.style.fontSiz='16px';
obj.style.backgroundColor='red';


設置屬性：

setAttribute('type','input')       設置一個type標籤，類型爲text
getAttribute
removeAttribute

建立標籤並添加到htmlurl

示例一spa


var tag = document.createElement('a')
tag.innerText = "xxxx"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/xxx"

建立標籤示例二3d

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="+" onclick="addele();"/>
    <div id="i1">
        <p><input type="text"></p>
        <hr>
    </div>
    <script>
        function addele() {
            //建立標籤
            //將標籤添加到i1裏
            var tag = "<p><input type='text'/></p>";
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
    </script>
</body>
</html>

操做標籤

// 方式一

var obj = "<input type='text' />";

xxx.insertAdjacentHTML("beforeEnd",obj);

xxx.insertAdjacentElement('afterBegin',document.createElement('p'))


//注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'



// 方式二

var tag = document.createElement('a')        ##建立一個a標籤

xxx.appendChild(tag)

xxx.insertBefore(tag,xxx[1])

表單提交

document.geElementById('').submit()

其餘操做


console.log                 輸出框
alert                       彈出框
confirm                     確認框

 
// URL和刷新
location.href               獲取URL
location.href = "url"       重定向
location.reload()           從新加載
 

// 定時器
setInterval                 屢次定時器
clearInterval               清除屢次定時器
setTimeout                  單次定時器
clearTimeout                清除單次定時器

dom事件

綁定事件的兩種方式：

直接標籤綁定，標籤裏onclick=‘xxx()’
先獲取dom對象，而後就行綁定（事件，結構，樣式分離頁面）

　 this，當前觸發事件的標籤

示例鼠標放到表格上自動變色

<body style="border:0;">
    <table border="1" width="200px">
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
    <script>
            var tag = document.getElementsByTagName('tr');
            for(var i=0;i<tag.length;i++){
                tag[i].onmouseover = function () {            
                    this.style.backgroundColor = 'red';            ###this指當前點擊的標籤

                };
                tag[i].onmouseout = function () {
                    this.style.backgroundColor = '';                ###this指當前點擊的標籤

                }
            }
    </script>
</body>

示例：依次執行多個事件

<style>
        #main{
            background-color: #0e90d2;
            width: 500px;
            height: 500px;
        }
        #content{
            background-color: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="content"></div>
    </div>
    <script>
        var mymain = document.getElementById('main');
        var mycontent = document.getElementById('content')

        mymain.addEventListener('click',function () {console.log('mian')},true);
        mycontent.addEventListener('click',function () {console.log('content')},true)
    </script>
</body>

addEventListener方法： 三個參數 事件，函數，true/false(決定打印輸出的順序)