基本DOM操作

基本DOM操作

什么是DOM

  DOM是Document Object Model文档对象模型的缩写，它用节点树的形式来表现文档，每个节点代表文档的构成部分。

获取页面元素的方法

  假设有如下的html结构

<div id = "dv" class = "first">

</div>

那么通过下面的几种方法都可以获得这个div元素:

//通过id去获得该元素
var dvObj = document.getElementById("dv"); 
//获得页面中所有标签名为div的元素，形成一个数组
var list = document.getElementsByTagName("div");  
//获得所有类名为first的元素，形成一个数组
var obj = document.getElementsByClassName("first");

修改属性和样式

  获得想要获得的元素之后，就可以修改其属性或者其样式。

设置p标签的内容

  假设有如下结构

<input type="button" id = "btn" value="点我">
<p>这是p</p>

我们需要要做的是，点一下按钮设置p标签内的文本内容为"这是一个p"

<script>
    //根据id获得按钮元素 onclick是点击事件，当点击按钮时会执行function
    document.getElementById("btn").onclick = function () {
        //根据标签名获得元素，由于是数组并且只有一个p,所以[0]就是我们要的
        //innerText是用来设置标签内部的内容的
        document.getElementsByTagName("p")[0].innerText = "这是一个p";
    }
</script>

设置a标签的链接地址和热点文字

  假设有如下结构

<input type="button" id = "btn" value="点我">
<a href="https://www.jiumodiary.com" id = "ak">鸠摩搜书</a>

<script>
    document.getElementById("btn").onclick = function () {
        var aObj = document.getElementById("ak");
        //修改a标签的href属性
        aObj.href = "https://www.baidu.com";
        //设置a标签内部的内容
        aObj.innerText = "百度";
    }
</script>

阻止超链接跳转

<a href="https://www.baidu.com" id="ak">百度</a>

//在超链接的点击事件中返回false即可阻止超链接跳转
document.getElementById("ak").onclick = function () {
    return false;  
}

设置样式

  假设有如下结构

<input type="button" id="btn" value="点我">
<div id="dv"></div>

点击按钮设置爱该div宽高为200px,并且背景颜色为红色

<script>
    document.getElementById("btn").onclick = function () {
        var dvObj = document.getElementById("dv");
        dvObj.style.width = "200px";
        dvObj.style.height = "200px";
        dvObj.style.backgroundColor = "red";
    }
</script>