js之DOM入门（慕课网学习笔记）

阅读原文时间：2023年07月08日阅读：1

document.getElementById(’’) 1、通过id获得元素内容
document.getElementsByTagName(’’) 2、通过标签获得元素内容
document.getElementsByClassName(’’) 3、通过class获得元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom简介</title>
</head>
<body>
    <div id="intro">helloworld</div>
    <div id="main">
        <p>The DOM is very useful.</p>
    </div>

    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>

    <script type="text/javascript">
        // 通过js获取html标签
        var intro = document.getElementById("intro");  // 通过id找html，唯一的
        var main = document.getElementById("main");
        var p = main.getElementsByTagName("p")[0];  //通过标签查找
        var content1 = document.getElementsByClassName("content")[0];  //通过class获得元素内容
    </script>
</body>
</html>

element.innerHTML=’ '//修改其中的内容
element.getAttribute() //获取属性
element.setAttribute() // 添加或者修改
element.src //针对image

element.href //针对a标签

Dom html

123

<img src="1.jpg" id="image" />

<a id="goUrl" href="">调到百度</a>
<script type="text/javascript">
    var main = document.getElementById("main");
    //修改其中的内容
    main.innerHTML= 'helloWorld';/**
 *      element.getAttribute()   //获取属性
        element.setAttribute()   // 添加或者修改
        element.src    //针对image
        element.href    //针对a标签

 *
 */
//获取属性值
alert(main.getAttribute("data"));
//修改属性值
main.setAttribute("data", "buhao");
//添加没有的属性
main.setAttribute("dd", "ddname");

var image = document.getElementById("image");
//比setAttribute更方便，修改src
image.src = "2.jpg";

var goUrl = document.getElementById("goUrl");
goUrl.href = "http://www.baidu.com"
</script>

document.getElementById("").style.color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom css</title>
</head>
<body>
    <div id="main">helloworld</div>
    <script type="text/javascript">
        var main = document.getElementById("main");
        main.style.color = "blue";
        main.style.fontSize = "100px";
    </script>
</body>
</html>

元素动作反应事件（这就是事件）

1）事件内嵌元素中
2）Element.οnclick=function(){displayDate()};

3）Element.addEventListener(“click”, function(){});

Dom 事件

按钮

我是main

我是btn

<script type="text/javascript">
    //第二种方式
    var main = document.getElementById("main");
    main.onclick = function(){
        alert("main被触发了");
    }
    //第三种方式
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function(){
        alert("btn被触发了");
    });
</script>

document.createElement(“p”) //创建一个p标签
document.createTextNode(“新增”) //创建一段文字
parent.appendChild(child); //将child对应的文字放到parent中
parent.removeChild(child); //删除

Dom 节点

我是第一个p

我是第二个p