Javascript文档对象模型(DOM)

1. 获取页面元素

getElementById()：根据id属性获取元素
getElementsByTagName()：根据标签名获取元素
getElementsByName()：根据name属性获取元素
getElementsByClassName()：根据class类名获取元素
querySelector()：获取匹配到的第一个元素
querySelectorAll()：获取匹配到的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <li>苹果</li>
    <li id="niu">香蕉</li>
    <li id="niu">牛奶</li>
    <p id="ge">这是一个水果</p>
    <div>
        <input type="checkbox" name="col">红色<br/>
        <input type="checkbox" name="coll">白色<br/>
        <input type="checkbox" name="collor" class="hei">绿色<br/>
        <input type="checkbox" name="color" class="hei">黑色<br/>

    </div>
    <script>
        var niu = document.getElementById("niu")
        console.log(niu)
        var ge = document.getElementsByTagName('p')
        console.log(ge)
        var col = document.getElementsByName('col')
        
        col[0].checked = true
        var chev = document.getElementsByClassName('hei')
        chev[0].checked = true
        console.log(chev)
        for(var i = 0;i<chev.length;i++){
            console.log(chev[i])
        }
        var li = document.querySelrctor('li')
        console.log(li)
        //id标签前面加#，class标签前面加.
        var id = document.querySelector('#niu')
        console.log('id')
        var lis = document.querySelectorAll('li')
        console.log(lis)

    </script>
</body>  
</html>

2. 操作元素内容

innerHTML：用来返回或者设置元素开始和结束标签之间的全部内容，包括html标签
innerText：返回或者设置元素开始和结束标签之间的纯文本内容，不包含html标签
textContent：用来返回或者设置指定节点的文本内容，同时保留空格和换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <li>西瓜</li>
    <li>香蕉</li>
    <li id="bai"><span>白菜</span></li>
    <li>菠萝</li>
    <li id="s"><span> 888 </span></li>
    <script>
        // 获取元素
        var id = document.getElementById('bai')
        var html = id.innerHTML
        var text = id.innerText
        console.log(html)
        console.log(text)
        var s = document.getElementById('s')
        var spantext = s.textContent
        console.log(spantext)

    </script>
</body>
</html>

3. 操作元素属性

设置属性值

设置内置属性值

element.属性 = '值' element.setAttribute('属性', '值')

设置自定义属性值

给元素的自定义属性赋值，主要有两种方式，其语法格式如下所示：

element.setAttribute('属性', '值') element.dataset.属性 = '值'

获取属性值

获取内置属性值

获取元素的内置属性值，主要有两种方式，其语法格式如下所示：

element.属性 element.getAttribute('属性')

获取自定义属性值

获取元素的自定义属性值，主要有两种方式，其语法格式如下所示：

element.getAttribute('属性') element.dataset.属性或：element.dataset['属性']

移除属性

移除元素的属性使用removeAttribute()方法，其语法格式如下所示： element.removeAttribute('属性')

4. 操作元素样式

操作style对象属性

可以通过操作style对象属性的方式返回或设置元素样式，其语法格式如下所示：

element.style.样式属性名 [= '样式值']

删除元素样式的语法格式如下所示：

element.style.样式属性名 = ''

操作className属性

也可以通过操作类名的方式返回或设置元素样式，其语法格式如下所示：

element.className [= '类名']

删除元素样式的语法格式如下所示：

element.className = ''

5.节点操作

获取节点

查找元素节点的常用属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td>Datal1</td>
            <td>Datal2</td>
            <td>Datal3</td>
        </tr>
        <tr>
            <td>Datal4</td>
            <td>Datal5</td>
            <td>Datal6</td>
        </tr>
        <tr>
            <td>Datal7</td>
            <td>Datal8</td>
            <td>Datal9</td>
        </tr>

    </table>
    <script>
        window.onload = function(){
            var myTd = document.getElementsByTagName("td")
            // 遍历td
            for(var i = 0;i<myTd.length;i++){
                myTd[1].onclick = function(){
                    var mypd = this.parentNode
                    mypd.style.backgroundColor = 'red'
                }
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="myid">
        <div>第一个元素</div>
        <div>第二个元素</div>
        <div>第三个元素</div>
    </div>
    <script>
        window.onload = function(){
            var myid = document.getElementById('myid').children
            for(var i = 0;i < myid.length;i++){
                myid[i].style.backgroundColor = "red"
            }
        }
    </script>
</body>
</html>

节点追加

节点追加包括创建和增加节点，网页中常用的节点追加的方法见表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">
        <p id="p1">这是第一个段落</p>

        <p id="p2">这是第二个段落</p>
        <button onclick="myfunction()">创建新段落</button>
    </div>
    <script>
        function myfunction(){
            var newp = document.createElement("p")
            var text = document.createTextNode("这是一个新段落")
            // 将新文本插入新段落
            newp.appendChild(text)
            var div = document.getElementById("div1")
            // 将新的p元素插入div
            div.appendChild(newp)
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">
        <p id="p1">这是第一个段落</p>

        <p id="p2">这是第二个段落</p>
        <button onclick="myfunction()">创建新段落</button>
    </div>
    <script>
        function myfunction(){
            var newp = document.createElement("p")
            var text = document.createTextNode("这是一个新段落")
            newp.appendChild(text)
            var div = document.getElementById("div1")
            var p2 = document.getElementById("p2")
            // 将新的p元素插入到第二段前面
            div.insertBefore(newp,p2)
        }
    </script>
</body>
</html>

节点删除

语法： parent.removeChild(thisNode)

参数说明：

thisNode 当前节点，即要删除的节点

parent 当前节点的父节点，即 thisNode.parentNode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list">
        <li>白菜</li>
        <li>菠萝</li>
        <li>茄子</li>
    </ul>
    <button onclick="myfunction()">删除最后一个列表项</button>
    <script>
        function myfunction(){
            var list = document.getElementById("list")
            list.removeChild(list.lastElementChild)
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list">
        <li>白菜</li>
        <li>菠萝</li>
        <li>茄子</li>
    </ul>
    <button onclick="myfunction()">删除最后一个列表项</button>
    <script>
        function myfunction(){
            var list = document.getElementById("list")
            // 点击“删除”按钮，删除所有列表项
            document.body.removeChild(list)
        }
    </script>
</body>
</html>