1. 什么是dom?

dom: document object model

2. js中获取一个页面元素

1 2	let d1 = document.getElementById("d1");//获取一个元素 let h2s = document.getElementsByTagName("h2");//获取多个元素

1 2	let d1 = document.querySelector("#d1");//获取一个元素 let h2s = document.querySelectorAll("h2");//获取多个元素

3. 遍历多个元素

let h2s = document.querySelectorAll("h2");
h2s.forEach(e =>
            console.log(e)
           )

4. 操作dom

let h1 = document.querySelector("div");
//给元素设置普通文本内容
// h1.innerText = "<h1>nihao</h1>";

//给元素设置html内容
h1.innerHTML = "<h1>nihao</h1>";

//选择一个元素
let boxElement = document.querySelector("#box");
//创建一个元素
let h1Element = document.createElement("h1");
//创建一个文本元素(节点)
let textElement = document.createTextNode("你好")
//给元素追加子节点 append(xx)也可以完成
h1Element.appendChild(textElement)
console.log(h1Element)

5. 改变元素的样式

let h1Element = document.querySelector("#d1");
//改变元素的样式
h1Element.style.color = "#0f0";
h1Element.style.backgroundColor = "#f00"

1
2
3

let h1Element = document.querySelector("#d1");
//改变元素的样式
h1Element.className += " c1"

6. 移除子节点

let boxElement = document.querySelector(".box");
let h1Element = document.createElement("h1")
h1Element.append("你好");
console.log(boxElement)
boxElement.appendChild(h1Element)
setTimeout(function () {
    //移除子节点
    boxElement.removeChild(h1Element)
}, 3000)

let boxElement = document.querySelector(".box");
let h1Element = document.createElement("h1")
h1Element.append("你好");
console.log(boxElement)
boxElement.appendChild(h1Element)
setTimeout(function (){
    boxElement.childNodes.forEach(e=>e.remove())
},3000)

8. 属性的操作

let h1 = document.querySelector("h1")
//获取属性值
let attributeV = h1.getAttribute("name");
//添加属性
h1.setAttribute("mm", "vvv")
//移除属性
h1.removeAttribute("mm")
console.log(attributeV)

9. js中的事件

事件的两种编写方式:

<button>点我1</button>
<button onclick="funcBtn2(this)">点我2</button>

<script>
let btn = document.querySelector("button");
btn.onclick = function () {
    console.log(this)
}


function funcBtn2(t) {
    console.log(t)
}
</script>

10. 点击事件与鼠标事件

当点击元素时触发的事件

<!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="UTF-8">
            <title></title>
</head>
<body>


            <button ondblclick="dbHandler()"
onmousedown="mouseDown()"
onmousemove="mouseMove()"
onmouseover="mouseOver()"
onmouseout="mouseOut()"
onmouseup="mouseUp()"
>双击事件</button>

<input type="text" onfocus="focusHandler()" onblur="blurHandler()">
    <script>
    function dbHandler() {
    console.log("双击事件")
}


function focusHandler() {
    console.log("鼠标聚焦事件")
}

function blurHandler() {
    console.log("鼠标失焦事件")
}


function mouseDown(){
    console.log("mouseDown")
}


function mouseMove(){
    console.log("mouseMove")
}


function mouseOver(){
    console.log("mouseOver")
}


function mouseOut(){
    console.log("mouseOut")
}
function mouseUp(){
    console.log("mouseUp")
}

</script>
</body>
</html>

11. 键盘的按键按下和松开的事件

<input type="text" onkeydown="keyDown()" onkeyup="keyUp()">
    <script>
    function keyDown() {
    console.log("按键被按下")
}

function keyUp() {
    console.log("按键被松开")
}
</script>

12. js的事件冒泡

<script>
    let box = document.querySelector(".box");
let button = document.querySelector("button");

button.onclick = function (event) {
    //阻止事件的分发(传播)
    event.stopPropagation()
    console.log("按钮被点击了")
}

box.onclick = function () {
    console.log("box 被点击了")
}
</script>

13. js获取表单元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取表单元素的值</title>
    </head>
    <body>

        <form>
            学生名称: <input name="name" type="text" placeholder="学生名称" autocomplete="off">
            <hr>
            学生年龄:<input name="age" type="number" placeholder="学生年龄">
            <hr>
            学生性别: 男:<input type="radio" name="sex" value="male"> 女:<input value="female" name="sex" type="radio">
            <hr>
            学生爱好:
            java:<input checked value="java" type="checkbox" name="hobby">
            大数据:<input value="大数据" type="checkbox" name="hobby">
            云计算:<input checked value="云计算" type="checkbox" name="hobby">
            <hr>
            简介: <textarea placeholder="输入简介" name="descp"></textarea>
            <hr>
            所属学校:
            <select name="school">
                <option value="西安科技大学">西安科技大学</option>
                <option value="西安邮电大学">西安邮电大学</option>
                <option value="西安交通大学" selected>西安交通大学</option>
            </select>


            <hr>
            <button type="button">点我获取表单数据</button>

        </form>


        <script>
            let btn = document.querySelector("button");
            btn.onclick = function () {
                //获取普通的input
                let nameElement = document.querySelector("input[name='name']")
                let ageElement = document.querySelector("input[name='age']")
                //获取单选框的值
                let sexElements = document.querySelectorAll("input[name='sex']")
                let sexValue = null;
                sexElements.forEach(sexEle => {
                    if (sexEle.checked) {
                        sexValue = sexEle.value
                    }
                })

                //获取复选框的值
                let hobbyValues = [];
                hobbyElements = document.querySelectorAll("input[name='hobby']");
                hobbyElements.forEach(hobbyEle => {
                    if (hobbyEle.checked) {
                        hobbyValues.push(hobbyEle.value)
                    }

                })

                //获取简介
                descpElement = document.querySelector("textarea[name='descp']");

                //获取option的值

                let selectElement = document.querySelector("select[name='school']");
                console.log(selectElement.value)
            }
        </script>
    </body>
</html>