DOM对象_dom撖寡情-CSDN博客

本文链接：https://blog.csdn.net/weixin_45943458/article/details/103801248

XML DOM , HTML DOM "DOM"叫文档操作模型。

html dom只有五个对象。

对文档树进行导航

<body>

<div id="div1">
    <div>hello div</div>
    <p>ppppp</p>
</div>
<script>
    var ele=document.getElementById("div1")
    alert(ele.firstElementChild) // 找到 div1 的第一个孩子
</script>
</body>

<script>
    var ele=document.getElementById("div1").firstElementChild
    alert(ele.nextElementSibling) // 找到 div 的下一个兄弟
</script>

<script>
    var ele=document.getElementById("div1")
    alert(ele.parentElement) // 找到 div1 的父亲。
</script>

标签对象的全局和局部查找

寻找对象的方式：

<body>

<div id="div1">hello
    <div class="div2">hello 2</div>
    <div class="div3">hello 3</div>
</div>
<script>
    var ele=document.getElementsByClassName("div2")[0]; //注意利用class找到是一个数组，所以，后面要加[0]进行索引。
    var ele2=ele.nextElementSibling;
    alert(ele2.innerHTML); // innerHTML 是取对象的内容。
</script>
</body>

通过标签名找：

var tag=document.getElementsByTagName("p") 
    alert(tag[0].innerHTML)

通过name属性找：

<body>

<div id="div1">hello
    <div class="div2">hello 2</div>
    <div name="gf">hello 3</div>
    <p>pppp</p>
</div>
<script>
 var name1=document.getElementsByName("gf")
 for (var i in name1){
     console.log(name1[i].innerHTML)
 }
    
</script>

局部查找

<body>

<div id="div1">hello
    <div class="div2">hello 2</div>
    <div class="div3">hello 3
        <p>hello inner</p>

    </div>
    <p>pppp</p>
</div>
<script>
    var ele=document.getElementsByClassName("div3")[0]; //注意这两个 [] 
    var ele2=ele.getElementsByTagName("p")[0]
    alert(ele2.innerHTML)
</script>
</body>

HTML DOM 事件

实现一个点击输入框时，里面的内容消失的效果：
onfocus事件：焦点操作，当鼠标点击输入框时获取焦点时触发
onblur事件：焦点操作，鼠标失去焦点时触发

<body>

<input type="text" value="输入用户名" onfocus="fun1()" onblur="fun2()" class="keyword">
<br/>
<input type="text">

<script>
    function fun1() {
        var inp=document.getElementsByClassName("keyword")[0];
        inp.value="";

    }
    function fun2() {
        var inp=document.getElementsByClassName("keyword")[0];
        if (inp.value.trim()==""){ //trim()是去掉空格，因为空格也是一个字符。
            inp.value="输入用户名";
        }

    }
</script>

</body>

onchange事件：发生改变就触发

<body>
<select onchange="fun1()">
    <!--onchange事件：一旦离开选择就会触发-->
    <option>北京</option>
    <option>天津</option>
    <option>广州</option>
    <option>满洲里</option>
</select>
<script>
    function fun1() {
        alert("发生改变")

    }
</script>
</body>

event 对象：主要是封闭，键盘，鼠标的状态信息，下面的代码是当点击按扭，再点键盘上的任意一个键，会显示这个键的对应码

<body>
<input type="button" value="点点" onkeydown="func1(event)">
<script>
    function func1(e) {
        alert(e.keyCode)
    }
</script>
</body>

在浏览器端控制提交

<body>
<form onsubmit="ck()"> //注意在这里加事件。如果不行，可以这样 οnsubmit="return ck()"
    <input type="text">
    <input type="submit">
</form>
<script>
    function ck() {
        alert("aaa")
        return false; //无论输入什么都不会提交，条件可以用正则来控制，完成提交。
    }
</script>

</body>

触发事件的第二种方式

<script>
    var obj=document.getElementsByClassName("p")[0]; //找到p标签
    obj.onclick=function () {
        alert(123)
    }
</script>

阻止事件传播:如果大的DIV有一个事件，里面的小DIV还有一个事件，那么当点击小DIV时，大DIV的事件也会执行，这叫“事件传播”

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #div1{
        background-color: #cea86f;
        width: 300px;
        height: 200px;
    }
    #div2{
        background-color: blue;
        width: 100px;
        height: 100px;
    }
</style>
<body>
<div id="div1" onclick="alert('div1')">
    <div id="div2" onclick="f(event)"></div>
</div>
<script>
    function f(event) {
        alert("div2");
        event.stopPropagation(); //阻止事件传播
    }
</script>
</body>
</html>

利用JS进行增、删、改、查标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
    <style>
        #div1{
            background-color: #cea86f;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="div1" style="overflow: auto">  <!--style="overflow: auto"加的滚动条，加多了会溢出。-->
    <div id="div2">hello div2</div>
    <p>hello p</p>
</div>
<input type="button" value="增" onclick="add()">
<input type="button" value="删" onclick="remove()">
<script>
    function add() {
        var ele=document.getElementById("div1") ;//首先找到父级标签
        var son=document.createElement("p") ;//然后创建一个要创建的对象
        ele.appendChild(son); //给父亲添加一个孩子
        son.innerHTML="添加的孩子P，成功~~"
        // son.innerText="添加的内容不转意";


    }
    function remove() {
         var ele=document.getElementById("div1") ;//首先找到父级标签
         var last_son=ele.lastElementChild; //找到最后个孩子
         ele.removeChild(last_son);
       // 注意  ele.classList.add("class"); //这样还添加一个CSS样式
       // ele.style.backgroundColor="#f0f" //这样指定颜色
       // ele.classList.remove("class") //删除CSS样式

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