前端学习day13-DOM：获取元素的内容，元素的属性，点击事件，添加元素

1.DOM

document object model 文档对象模型

把页面封装成js对象包含了各种属性和方法

可以利用其提供的属性和方法进行页面的操作（样式更改点击事件元素的操作）

api 提供了一个document对象

dir 目录 可以查看对象中所拥有的属性（property）和方法

console.dir(document);

获取文档标题：

document.title

获取html标签所对应的JS对象：

document.documentElement;

获取body标签对应的JS对象：

doucument.body;

document.getElementById();通过ID名查询元素

document.getElementsByClassName();通过类名查询元素
得到的是伪数组，不能使用forEach，要强制转换为数组对象

Array.from(
 document.getElementsByClassName("li")
).forEach(function (el, i) {
            console.log(el);
            el.style.background = colos[i];
        })
var colos = ["red", "blue", "yellow"];

document.getElementsByTagName("li");//通过标签名查询元素   返回值也为伪数组

document.querySelectorAll(".p");//查询多个选择器---参数为选择器类名前面要加“.”,可以使用forEach

document.querySelector("#test");//查询单个参数为字符串

2.获取标签的内容

document.querySelector("div") // 找到是文档流中第一个元素

document.querySelector("div").innerText;//inner 内部获取标签内容

// 不包括空格和换行

// content

document.querySelector("div").textContent;//保留内容区域的空格和换行

document.querySelector("div").innerHTML;//把标签作为内容进行展示

document.querySelector("div").outerHTML;//包含标签的整个文本

3.获取元素自带的属性

document.querySelector("div").title;

document.querySelector("div").id;

document.querySelector("div").classname;// 通过classname来修改元素的类名会覆盖之前的

 // 如果要保留之前的  都拼接上去
        div.className = "green red blue";

        var divClass = div.classList;
        console.log("clname =", divClass);


        // add
        divClass.add("yellow");
        // 删除
        divClass.remove("red");
        // 删除多个
        // divClass.remove("yellow","green");
        divClass.remove(...["yellow", "green"]);
        // replace 替换
        divClass.replace("blue", "bigBlue");

document.querySelector("img").src;//获取资源路径

document.querySelector('input').value;//修改输入框中的内容

 document.querySelector(".box").checked;//复选框中的状态

4.获取元素自定义属性

document.querySelector("p").getAttribute("myname");

设置自定义属性

document.querySelector("p").setArrtribute("myname","ledi");

自定义属性以data-命名的：

document.querySelector("main").getAttribute("data-name");

获取其自定义属性： document.querySelector("main").dataset.name;

设置自定义属性 : document.querySelector("main").dataset.name = "哈哈哈哈";

如果使用多个横线分隔取值时采用小驼峰的形式：

document.querySelector("main").getAttribute("data-my-name");

document.querySelector("main").dataset.myName;

5.点击事件

document.querySelector("div").οnclick=function(){}

 <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            /* 让内容无法选中  */
            user-select: none;
        }

        .active {
            font-size: 50px;
            color: blue;
            background: yellow;
        }
    </style>
</head>

<body>
    <button>点击</button>

    <div>
        点我!!!
    </div>

    <p>点击 会改变我的样式</p>

    <script>

        var div = document.querySelector("div");

        var p = document.querySelector("p");


        var num = 0;
        var isChange = true;
        // 绑定事件
        // click  点击
        div.onclick = function () {
            // 1....
            // num++;
            // if (num % 2 == 0) {
            //     p.style.color = "red";
            //     p.style.background = "yellow";
            //     p.style.fontSize = "50px";
            // }
            // else{
            //     p.style.color = "blue";
            //     p.style.background = "green";
            //     p.style.fontSize = "30px";
            // }
            
            // 2.....
            // if(isChange){
            //     p.style.color = "red";
            //     p.style.background = "yellow";
            //     p.style.fontSize = "50px"
            //     isChange = false;
            // }
            // else{
            //     p.style.color = "blue";
            //     p.style.background = "green";
            //     p.style.fontSize = "30px";
            //     isChange = true;
            // }


            // 3...

            // if(isChange){
            //     p.style.color = "red";
            //     p.style.background = "yellow";
            //     p.style.fontSize = "50px"
            // }
            // else{
            //     p.style.color = "blue";
            //     p.style.background = "green";
            //     p.style.fontSize = "30px";
            // }
            // isChange = !isChange;


            // 4.
            // 比上边的方式更加的简洁
            // if(isChange){
            //     p.classList.add("active");
            // }
            // else{
            //     p.classList.remove("active");
            // }
            // isChange = !isChange;
            p.classList.toggle("active");
        }


    </script>
</body>

6.添加元素

6.1往标签中添加其他标签通过 innerHTML

document.querySelector("div").innerHTML = "<h1>哈哈哈哈哈哈哈</h1>";

6.2通过API中提供的方法往元素中添加元素

document.createElement("h2")；

6.3追加 append

append 可以追加多个  并且类型可以字符串  或者 是元素节点

 document.querySelector("div").append("123",document.createElement("h2"));

追加同一个元素 只能添加一次

document.querySelector("div").appendChild(document.createElement("h2"));

 追加到开头的位置  prepend

document.querySelector("div").prepend(document.createElement("h2"));