DOM学习详细笔记

DOM

DOM document Object Model 文档对象模型

// 整个html文档,会保存一个文档对象document
// console.log( document ); // 获取当前文档的对象

image-20220517151058164

查找标签

直接查找
document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")

1、方法的返回值是dom对象还是数组

2、document对象可以是任意dom对象，将查询范围限制在当前dom对象

image-20220517151747656

导航查找标签
<div class="background">
   <div class="c1"></div>
    <div class="c2">
        <div class="c3"></div>
        <div class="c4"></div>
        <div class="c5"></div>
    </div>
</div>
<script>
    var c2 = document.getElementsByClassName("c2")[0];
    var c4 = document.getElementsByClassName("c4")[0];
    console.log(c2.parentElement);
    console.log(c2.children);
    console.log(c2.firstElementChild);
    console.log(c2.lastElementChild);
    console.log(c4.nextElementSibling);
    console.log(c4.previousElementSibling);
</script>

image-20220517201650042

css选择器
document.querySelector("css选择器")  //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组

绑定事件🌟🌟🌟

静态绑定
<div id="div" onclick="foo(this)">click</div>

<script>
    function foo(self){           // 形参不能是this;
        console.log("foo函数");
        console.log(self);   
    }
</script>
动态绑定

在js中通过代码获取元素对象,然后给这个对象进行后续绑定。

   <p id="i1">试一试</p>
</div>
<script>
    var ele = document.getElementById("i1");
    ele.onclick = function () {
        console.log("ok");
        console.log(this); //可以直接用this
    };
</script>

一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码

  • 多个标签的事件绑定

    <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>


<script>

    var eles = document.querySelectorAll("ul li");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick = function (){
            console.log(this.innerHTML) //innerhtml输出的东西就是标签里面的内容
            // console.log(eles[i].innerHTML)  // 结果？
        }
    }

</script>

    this.innerhtml我们也可以进行修改，假设在点击之后列表的中的元素要改为“ivanlee”+原内容

     for(var i=0;i<eles.length;i++){
        eles[i].onclick = function (){
            this.innerHTML = 'ivanlee'+this.innerHTML;

    image-20220517205723730

    经过点击之后

    image-20220517205909422

操作标签

<标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>
文本操作
<div id="i1">
  <span>ivanee</span>
</div>
<script>
  var ele = document.getElementById("i1");
  ele.onclick = function () {
    console.log(this.innerHTML);
    console.log(this.innerText);
    
  }

</script>

image-20220517211720769

还可以有双击鼠标事件：

ele.ondblclick = function () {
  this.innerHTML = "<a href='http://www.baidu.com'>ivanlee</a>";
  innerhtml里存放了一个新的超链接标签，双击可以出发此链接
}

image-20220517212115853

当双击鼠标之后，页面显示变为一个带有超链接标签的ivanlee，此时点击就可以进入百度搜索栏

image-20220517212227363

但是如果换做是innertext则不会有任何的反应

ele.ondblclick = function () {
  this.innertext = "<a href='http://www.baidu.com'>ivanlee</a>";
  innerhtml里存放了一个新的超链接标签，双击可以出发此链接
}

innerHTML和innertext的区别

1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)

2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）

3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）

4） outerText设置或获取标签自身及其所包含的文本信息（包括自身）

image-20220517212541182

innerText和outerText在获取的时候是相同效果，但在设置时，innerText仅设置标签所包含的文本，而outerText设置包含包括标签自身在内的文本。

value操作

像input标签，select标签以及textarea标签是没有文本的，但是显示内容由value属性决定

image-20220518130141236

<input type="text" id="i1" value="ivan">
    <textarea name="" id="i2" cols="30" rows="10">123</textarea>
    <select  id="i3">
        <option value="hebei">河北省</option>
        <option value="hubei">湖北省</option>
        <option value="guangdong">广东省</option>
    </select>

<script>

    // input标签
    var ele1 =document.getElementById("i1");
    console.log(ele1.value);
    ele1.onmouseover = function (){
        this.value = "ivanlee";   鼠标悬停就会触发事件
    }

    // textarea标签
    var ele2 =document.getElementById("i2");
    console.log(ele2.value);
    ele2.onmouseover = function (){
        this.value = "welcome to JS world！"
    }
    // select标签
    var ele3 =document.getElementById("i3");
    console.log(ele3.value);
    ele3.value= "hubei"

</script>
css样式操作
<p id="i1">Hello world!</p>

<script>
    var ele = document.getElementById("i1");
    ele.onclick = function (){
        this.style.color = "red"
    }
</script>

image-20220518130926892

image-20220518130955353

属性操作
 <div id="d1" k1="k" k2="k2">
    </div>
  <script>
      var ele = document.getElementById("d1");
      console.log(ele);  >>> <div id="d1" k1="k" k2="k2">
      console.log(ele.getAttribute("k1")); >>> k
      ele.setAttribute("k1","k1");
      console.log(ele);  >>><div id="d1" k1="k1" k2="k2">
      ele.removeAttribute("k1");
      console.log(ele);

  </script>

并不是所有属性都可以像value那样操作。

class属性操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
练习 京东tab页面切换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ivanlee</title>
    <link rel="shortcut icon" href="f.ico">
    <style>
        .tab{
            width: 800px;
            height: 500px;
            margin: 200px auto;
        }
        .tab ul{
            list-style: none;
            z-index: 1;
            padding: 0;
            margin: 0;
        }
        .tab .tab-title{
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
            font-family: "Microsoft Sans Serif";
            display: inline-block;
        }
        .tab .tab-title li{
            display: inline-block;
            padding: 10px 25px;
            font-size: 14px;

        }
        li.current{
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }
        .hide{
            display: none;
        }
    </style>

</head>
<body>

<div class="tab">
    <ul class="tab-title">
        <li class="current" index="0">商品介绍</li>
        <li class="" index="1">规格与包装</li>
        <li class="" index="2">售后保障</li>
        <li class="" index="3">商品评价</li>
    </ul>
    <ul class="tab-content">
        <li>商品介绍...</li>
        <li class="hide">规格与包装...</li>
        <li class="hide">售后保障...</li>
        <li class="hide">商品评价...</li>
    </ul>
</div>
<div class="background"></div>
<script>
    var _titles = document.querySelectorAll(".tab .tab-title li");
    var _content = document.querySelectorAll(".tab .tab-content li");
    for (var i=0; i<_titles.length;i++){
        _titles[i].onclick = function(){
            for (var j=0; j <_titles.length;j++){
                _titles[j].classList.remove("current");
             }
            this.classList.add("current");
            var _index = this.getAttribute("index");
            for (var k=0; k <_content.length;k++){
                _content[k].classList.add("hide");
            }
            _content[_index].classList.remove("hide");
        }
    }


</script>

</body>
</html>

image-20220518142327701

image-20220518142344421

节点操作
// 创建节点：
document.createElement("标签名")
// 插入节点
somenode.appendChild(newnode)             // 追加一个子节点（作为最后的子节点）
somenode.insertBefore(newnode,某个节点)   // 把增加的节点放到某个节点的前边
// 删除节点
somenode.removeChild()：获得要删除的元素，通过父元素调用删除
//替换节点
somenode.replaceChild(newnode, 某个节点);

<button class="add_btn">添加节点</button>
<button class="del_btn">删除节点</button>
<button class="replace_btn">替换节点</button>
<div class="c1">
    <h3>hello JS!</h3>
    <h3 class="c2">hello world</h3>
</div>

  • 添加和插入节点

     var add_btn = document.querySelector(".add_btn");
var c1 = document.querySelector(".c1");
var c2 = document.querySelector(".c2");
add_btn.onclick = function () {
  // 创建节点
  var ele = document.createElement("img");  // <img>
  ele.src = "https://img2.baidu.com/it/u=3312360479,315254076&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"
  console.log(ele);
  // 添加节点
  c1.appendChild(ele); 第一种

  c1.insertBefore(ele, c2) 第二种


}

    image-20220518144235023

    第一种是插入到最后

    image-20220518144252963

    第二种是插入到某个子节点的前面

    image-20220518144334516

  • 删除节点

    del_btn.onclick = function () {
        // 删除子节点
        c1.removeChild(c2);
    };

  • 替换节点

    replace_btn.onclick = function () {

        // 创建替换节点

        var ele = document.createElement("img");  // <img>
        ele.src = "https://img2.baidu.com/it/u=1613029778,1507777131&fm=26&fmt=auto&gp=0.jpg"
        console.log(ele);

        // 替换节点
        c1.replaceChild(ele, c2);

    }

    image-20220518144755392

常用事件

onload
<script>
        window.onload = function () {
            ele = document.getElementById("i")
            console.log(ele.innerHTML);
        }
    </script>
</head>
<body>
<div class="background">
    <div id="i">ivanlee</div>
</div>

window.onload的方法解决了js在从上到下编译的时候，无法先解析body里面的内容，后解析

posted @ 2022-05-18 15:58  ivanlee717  阅读(167)  评论(0)  编辑  收藏  举报