JS访问Web页面的元素

1. 访问特定元素

document.getElementById('id')

2. 根据元素名访问

document.getElementsByTagName('img')

值得注意的是，上述返回的是一个类数组NodeList，他是一个特殊的集合，动态的集合，不是一个Array对象，因此不能对其使用数组方法，例如push()等。NodeList的唯一属性是length，其唯一的方法是item()，该方法接收一个数值参数作为索引，返回该位置的元素

var imgs = document.getElementsByTagName('img');
        imgs.item(3);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p><img src="001.jpg" alt="xxx" /></p>
    <p><img src="002.jpg" alt="xxx" /></p>
    <p><img src="003.jpg" alt="xxx" /></p>
    <script>
        var imgs = document.getElementsByTagName('img');
        console.log(imgs.length);//3
        var p = document.createElement('p');
        var img = document.createElement('img');
        img.src = "haha.jpg";
        p.appendChild(img);

        var paras = document.getElementsByTagName('p');
        paras.item(0).parentNode.appendChild(p);
        console.log(imgs.length);//4
        console.log(paras.length);//4
    </script>
</body>
</html>

3. 使用Selects API

选择器查询API方法
方法
document.querySelector()	返回匹配选择器的第一个结果
document.querySelectorAll()	返回选择匹配其的所有结果

值得注意的是，选择器语法派生自支持CSS选择器的语法。

4. 设置元素的CSS样式属性

document.getElementById('id').style.backgroundColor = 'white';
        document.getElementById('id').setAttribute("style", "属性:属性值;...");
        document.getElementById('id').setAttribute("className", "class1");

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .class1{
            background-color:red;
            font-size:20px;
        }
    </style>
</head>
<body>
    <p id="p1">这是一个小小的测试</p>
    <script>
        var p1 = document.getElementById('p1');
        //方式一
        //p1.style.backgroundColor = 'red';
        //p1.style.fontSize = '20px';
        //方式二
        //p1.setAttribute('style', 'background-color:red;font-size:20px');
        //方式三
        p1.setAttribute("class", "class1");
        
        //方式四
        //var styleAttr = document.createAttribute("style");
        //styleAttr.nodeValue = "background-color:red";
        //p1.setAttribute(styleAttr);
    </script>
</body>
</html>

5. 对无序列表应用条纹主题

<body>
    <ul id="u1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        var list = document.querySelectorAll('li');
        for (var i = 0; i < list.length; i++) {
            list[i].setAttribute('style', "background-color:red");
        }
    </script>
</body>

6. 找出共享同一属性的所有元素

document.querySelectorAll('*[class]')//选择了所有包含属性的元素
        document.querySelectorAll('*[class="class1"]')//选择了所有class属性为red的所有元素
        document.querySelectorAll('*[class*="class1"')//选择所有class属性包含字符串class1的所有元素

7. 给新的段落添加文本

扫描二维码关注公众号，回复： 4833295 查看本文章

<body>
    <ul id="u1">
        <li>222</li>
        <li>222</li>
        <li>333</li>
        <li></li>
    </ul>
    <script>
        var list = document.querySelectorAll('li');
        for (var i = 0; i < list.length; i++) {
            list[i].setAttribute('style', "background-color:red");
        }
        var li = document.querySelectorAll('li')[3];
        var txt = document.createTextNode("this is a example");
        li.appendChild(txt);
    </script>
</body>

8. 从HTML表格删除行

当从Web文档删除一个元素的时候，不仅会删除该元素，而且还会删除其所有的子元素。若想要在完全丢弃被删除的元素之前来处理其内容的话，在这个DOM删改中，可以获取对要删除的元素的一个引用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        table{
            border-collapse:collapse;
        }
        td,th{
            padding:5px;
            border:1px solid #ccc;
        }
        tr:nth-child(2n+1){
            background-color:#eeffee;
        }
    </style>
</head>
<body>
    <table id="table1">
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
            <th>标题4</th>
        </tr>
    </table>
    <div id="result"></div>
    <script>
        var values = new Array(4);
        values[0] = [32, "hahh", 78.3, 90];
        values[1] = ["ddd", "ioi", "89", 78];
        values[2] = ["898", "dgs", "yuiu", "hdsh"];
        values[3] = ["uiui", 89.67, "hdsjhj", "jdiso"];

        var mixed = document.getElementById("table1");
        var tbody = document.createElement("tbody");

        for (var i = 0; i < values.length; i++) {
            var tr = document.createElement("tr");

            for (var j = 0; j < values[i].length; j++) {
                var td = document.createElement("td");
                var txt = document.createTextNode(values[i][j].toString());
                td.appendChild(txt);
                tr.appendChild(td);
            }

            //绑定事件处理程序
            tr.onclick = prunerow;

            tbody.appendChild(tr);
            mixed.appendChild(tbody);
        }

        function prunerow() {
            //删除行
            var parent = this.parentNode;
            var oldrow = parent.removeChild(this);

            //来自删除行的数据的datastring
            var datastring = "";
            for (var i = 0; i < oldrow.childNodes.length; i++) {
                var cell = oldrow.childNodes[i];
                datastring += cell.firstChild.data + "";
            }
            //输出消息
            var msg = document.createTextNode("removed " + datastring);
            var p = document.createElement("p");
            p.appendChild(msg);
            document.getElementById('table1').appendChild(p);
        }
    </script>
</body>
</html>

9. 添加一个页面覆盖

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        table{
            border-collapse:collapse;
        }
        td,th{
            padding:5px;
            border:1px solid #ccc;
        }
        tr:nth-child(2n+1){
            background-color:#eeffee;
        }
        .overlay{
            background-color:#000;
            opacity:-5;
            filter:alpha(opacity=50);
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:10;
        }
        .overlaymsg{
            position:absolute;
            background-color:yellow;
            padding:10px;
            width:200px;
            height:200px;
            font-size:2em;
            z-index:11;
            top:50%;
            left:50%;
            margin-left:-100px;
            margin-top:-100px;
        }
    </style>
</head>
<body>
    <table id="table1">
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
            <th>标题4</th>
        </tr>
    </table>
    <div id="result"></div>
    <script>
        var values = new Array(4);
        values[0] = [32, "hahh", 78.3, 90];
        values[1] = ["ddd", "ioi", "89", 78];
        values[2] = ["898", "dgs", "yuiu", "hdsh"];
        values[3] = ["uiui", 89.67, "hdsjhj", "jdiso"];

        var mixed = document.getElementById("table1");
        var tbody = document.createElement("tbody");

        for (var i = 0; i < values.length; i++) {
            var tr = document.createElement("tr");

            for (var j = 0; j < values[i].length; j++) {
                var td = document.createElement("td");
                var txt = document.createTextNode(values[i][j].toString());
                td.appendChild(txt);
                tr.appendChild(td);
            }

            //绑定事件处理程序
            tr.onclick = prunerow;

            tbody.appendChild(tr);
            mixed.appendChild(tbody);
        }

        function prunerow() {
            //删除行
            var parent = this.parentNode;
            var oldrow = parent.removeChild(this);

            //来自删除行的数据的datastring
            var datastring = "";
            for (var i = 0; i < oldrow.childNodes.length; i++) {
                var cell = oldrow.childNodes[i];
                datastring += cell.firstChild.data + "";
            }
            //输出消息
            var msg = document.createTextNode("removed " + datastring);
            var p = document.createElement("p");
            p.appendChild(msg);
            document.getElementById('table1').appendChild(p);
        }

        //创建覆盖
        function displayPopup() {
            var div = document.getElementById('result');
            div.setAttribute("class", "overlay");

            //创建图像
            var msg = document.createElement("div");
            var txt = document.createTextNode("please join our mailing list!(click to close.)");
            msg.appendChild(txt);
            msg.setAttribute("id", "msg");
            msg.setAttribute("class", "overlaymsg");

            //单击以恢复页面
            msg.onclick = restore;
            //将消息附加到覆盖
            document.body.appendChild(msg);
        }
        //将页面恢复正常
        function restore() {
            document.body.removeChild(document.getElementById("result"));
            document.body.removeChild(document.getElementById("msg"));
            document.body.removeChild(document.getElementById("table1"));
        }

        window.onload = function () {
            displayPopup();
        }
    </script>
</body>
</html>

JS访问Web页面的元素

猜你喜欢