Js文档对象模型（DOM）

DOM是JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作(增删改查)。

浏览器会根据DOM模型，将结构化文档(比如HTML和XML)解析成一系列的节点，再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构，都有规范的对外接口。

<body>
    <p id="p">id=p的p标签</p>
    <p class="p">class=p的p标签1</p>
    <p class="p">class=p的p标签2</p>
    <p name="p">name=p的p标签1</p>
    <p name="p">name=p的p标签2</p>
    <script type="text/javascript">
        //查找节点：
        //通过id查找节点
        document.getElementById('p').style.background = "red";
        //通过class查找节点
        var a = document.getElementsByClassName('p');
        a[0].style.background = "green";//循环遍历可修改多个
        //通过name查找节点
        var b = document.getElementsByName('p');
        b[1].style.background = "yellow";
        //通过tag查找节点
        var c = document.getElementsByTagName('p');
        c[2].style.background = "purple";

        //通过css选择器值选择节点
        //当有多个符合条件的时候只选中第一个
        document.querySelector('#p').style.background = "red";
        //选择符合条件的多个
        var a = document.querySelectorAll('.p');
        a[0].style.background = "yellow";
    </script>
</body>

<body>
    <input type="button" value="按钮" id="btn">
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        //点击按钮进行弹框
        btn.onclick = function(){
            alert("heshangzhou");
        }
    </script>
</body>

<body>
    <p id="p">666666</p>
    <input type="button" value="按钮" id="btn">   
</body>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    //点击按钮改变文字
    btn.onclick = function(){
        var p = document.getElementById("p");
        p.innerText = "888888";
    }
</script>

<body>
    <a href="#" id="a">百度一下</a>
    <input type="button" value="修改" id="btn">   
</body>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    //点击按钮改变链接
    btn.onclick = function(){
        var a = document.getElementById("a");
        a.href = "http://www.hsz.com";
        a.innerText = "hsz";
    }
</script>

<body>
    <img src="./abc.jpg" id="img">
    <input type="button" value="修改" id="btn">   
</body>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    //点击按钮改变图片大小
    btn.onclick = function(){
        var img = document.getElementById("img");
        img.width = 100;
        img.style.height = '60px';
    }
</script>

<body>  
    <input type="button" value="修改" id="btn">   
</body>
<script type="text/javascript">
    //点击按钮改变按钮文字
    document.getElementsByTagName('input')[0].onclick = function(){
        this.value = "按钮";
    }
</script>

<body>
    <img src="./abc.jpg" id="img">  
</body>
<script type="text/javascript">
    //每次点击图片都使图片的宽度-10px
    document.getElementById('img').onclick = function(){
        img.width = img.width-10;
    }
</script>

<body>
    <input type="button" value="厉害了"><br>
    <input type="button" value="厉害了"><br>
    <input type="button" value="厉害了"><br>
    <input type="button" value="厉害了"><br>
    <input type="button" value="厉害了"><br>
    <input type="button" value="厉害了"><br>
    <input type="button" value="厉害了"><br>
</body>
<script type="text/javascript">
    //点谁谁不改，其它全改
    var btn = document.querySelectorAll('input');
    for(var i in btn){
        btn[i].onclick = function(){
            //获取被点击按钮的值
            var val = this.value;
            if(val=="厉害了"){
                var valFan = "不厉害";
            }else{
                var valFan = "厉害了";
            }
            for(var j in btn){
                //判断当前标签是否是被点击的标签
                //如果不是则改变其值
                if(btn[j] != this){                 
                    btn[j].value = valFan;
                }               
            }
        }
    }
</script>

Js文档对象模型（DOM）

猜你喜欢