今日webAPI知识点总结

获取页面元素的方法

根据id获取元素，返回一个元素对象

getElementById("id名");

根据标签名获取元素，返回一个伪数组，数组里存的是多个DOM元素对象

getElementsByTagName("标签名")

下面的有些可能浏览器不支持

根据name属性获取元素，返回一个伪数组，数组里存的是多个DOM元素对象

getElementsByName("name属性的值")

根据class名获取元素，返回一个伪数组，数组里存的是多个DOM元素对象

getElementsByClassName("类名")

根据选择器获取元素，返回一个元素对象

querySelector("选择器的名字");

根据选择器获取元素，返回一个伪数组，数组里存的是多个DOM元素对象

querySelectorAll("选择器的名字");

开关

灯案例简单代码

<style>
   .cls {
         background-color: #000;
   }
</style>
<input type="button" value="关灯" id="btn">

<script>
    var btn = document.getElementById("btn");
    btn.onclick = function (){
        if (this.value == "关灯"){
            document.body.className = "cls";
            this.value = "开灯";
        } else {
            document.body.className = "";
            this.value = "关灯";
        }

    }
</script>

可以直接通过document.body获取body元素

阻止a标签默认跳转:

<!--第一种写法-->
<a href="http://www.baidu.com" onclick="alert('hello'); return false;">百度一些</a> <br>

<!--第二种写法-->
<a href="http://www.baidu.com" onclick="return f1();">百度一下</a>

<!--第三种写法-->
<a href="http://www.baidu.com" id="ak">百度一下</a>

<script>
    function f1(){
        alert("第二个");
        return false;
    }
    //调用f1();====f1函数的返回值 false

//获取a标签，注册点击事件，并添加事件处理函数
    document.getElementById("ak").onclick=function(){
        alert("第三个");
        return false;
    }

</script>