HTML DOM(文档对象模型)学习

前端前端、杂记、笔记

创建时间:2022-10-17 21:00

阅读:

1.简介
2.文件路径
3.效果图
4.html内容
4.Js内容

1.简介

DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）
它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）
• 文档
    – 文档表示的就是整个的HTML网页文档
• 对象
    – 对象表示将网页中的每一个部分都转换为了一个对象。
• 模型
    – 使用模型来表示对象之间的关系，这样方便我们获取对象

2.文件路径

3.效果图

4.html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./static/index.js"></script>
    <script src="./static/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="id1" class="class1">div值</div>
<button id="id2" class="class2">button值</button>
<input id="id3" type="text" value="输入框">

<div id="id4" class="class4">获取属性的值</div>
<button id="id5">按钮不可点击</button>

<div id="id6" class="class1">div值调整样式</div>

<table>
    <tr>
        <th>表头1-序号</th>
        <th>表头1-名字</th>
        <th>表头2-年齡</th>
        <th>表头3-班級</th>
    </tr>
    <tbody id="table_value"></tbody>

</table>
<br>
<button onclick="ButtonClick()">按钮点击事件</button>
<br>
<br>
<input  type="text" onblur="ButtonBlur()" value="按钮失焦事件">
</body>
</html>

4.Js内容

window.onload = function () {

    // 只有valu属性的标签，在获取值的使用才可以使用document.getElementById("xxx").value
    // 否则只能使用document.getElementById("xxx").innerText去获取显示的值

    // 获取div标签 显示的值
    let id1_value = document.getElementById("id1").innerText
    // 修改div标签 显示的值
    document.getElementById("id1").innerText = "3333"
    
    // 如果class属性都一样,返回一个数组对象
    console.log(document.getElementsByClassName("tb_1")[1]) 

    // 获取button标签 显示的值
    let id2_value = document.getElementById("id2").innerText
    // 修改button标签 显示的值
    document.getElementById("id2").innerText = "新的button值"

    // 获取input标签 显示的值
    let id3_value = document.getElementById("id3").value
    // 修改input标签 显示的值
    document.getElementById("id3").setAttribute("value", "input新值")


    // 获取属性的值
    let id4_value = document.getElementById("id4").getAttribute("class")
    // 设置属性值
    document.getElementById("id4").setAttribute("class", "设置新的属性值")

    // 设置按钮不可点击 true和 false值用小写
    document.getElementById("id5").disabled = true
    // 设置按钮可以点击
    // document.getElementById("id5").disabled= false

    // 调整样式-修改字体颜色
    document.getElementById("id4").style.color = "red"


    // 表格数据
    let result = [["a", 18, "A班"], ["b", 19, "A班"], ["c", 20, "B班"]]
    for (let i = 0; i < result.length; i++) { //对stus进行循环遍历，并建立tr标签
        // 只有jquery语法能使用append方法，定位到父元素，然后会在下面添加新的内容
        $("#table_value").append(
            "<tr id='table'>" +
                "<td><div id='tb_xuhao' class='tb_1'>" + (i + 1) + "</div></td>" +
                "<td><div id='tb_name' class='tb_1'>" + result[i][0] + "</div></td>" +
                "<td><div id='tb_age' class='tb_1'>" + result[i][1] + "</div></td>" +
                "<td><div id='tb_class' class='tb_1'>" + result[i][2] + "</div></td>" +
            "</tr>"
        )
    }


}

// 按钮点击事件
function ButtonClick() {
    alert("按钮点击了")
}

// 按钮失焦事件
function ButtonBlur() {
    alert("按钮失焦")
}

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。