DOM的基础知识

最新推荐文章于 2022-08-24 17:46:16 发布

weixin_45989924

最新推荐文章于 2022-08-24 17:46:16 发布

阅读量245

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45989924/article/details/115535045

版权

DOM的基础知识

什么是DOM
DOM:Document Object Model 文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口 B:浏览器O:对象M:模型，W3C定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式
DOM的简介
DOM树：
如何获取页面元素
document文档对象提供了一系列的api方法，可以方便我们操作dom数上面的节点
(1)getElementById根据id属性获取到页面上唯一的一个元素
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById
const table = document.getElementById(‘forecast-table’) 得到的是一个对象集合数组，所以想要操作里面的元素就得遍历，得到的元素的是动态的

(2) 可以通过标签的名字来获取到当前元素document.getElementsByTagName(“li”)属性来获取到元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
        知否，知否，应是等你好久1
    </li>
    <li>
        知否，知否，应是等你好久2
    </li>
    <li>
        知否，知否，应是等你好久3
    </li>
    <li>
        知否，知否，应是等你好久4
    </li>
    </ul>
</body>
<script>
var s=document.getElementsByTagName("li")
console.log(s);
</script>
</html>

(3)通过H5新增的获取元素的方式（有兼容问题。无法兼容IE6，7，8） document.getElementsByClassName(“类名”)
（4）通过document.querySelector(“选择器”)获取元素，返回指定选择器的第一个元素对象，切记里面的选择器需要加符号，如.box #text返回制定选择器的所有元素的对象集合

var c =document.querySelector("#text")

（5）通过document.querySelectorAll("#text")

var d=document.querySelectorAll("#text")
console.log(d);

（6）获取特殊元素 body 和HTML 元素

console.log(document.body);
console.log(document.documentElement);

事件的基础
javascript使我们哟能力创建动态页面，而事件是可以被javascript侦测到的行为，网页中的每个元素度可以产生某些可以触发javascript的事件，，例如：在用户点击某个按钮时产生一个事件，然后去执行某个操作

<body>
    <div class="btn">按钮</div>
     <script>
        //  点击一个事件，弹出对话框
        // 事件是由三部分组成，事件源，时间类型，事件处理程序，被称为事件三要素
        // （1）事件源：事件被触发的对象 谁 按钮
        // （2）事件类型：如何触发 什么事件比如鼠标点击事件，还是鼠标经过还是键盘按下
        // （3）十几年处理程序：通过一个函数赋值的方式完成
         var btn=document.querySelector(".btn")
         btn.onclick=function(){
             alert("11")
         }
</script>

如何操作DOM元素
javascript的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素里面的内容属性等
(1)改变元素的内容和结构 :innerHTML 修改结构和innerText修改内容

  <p>
        我是文字：
        <span>123</span>
    </p>
  
        //  innerHTML和innerText的区别：innerText不识别html标签，非标准，去除空格和换行；innerHTML识别html标签 W3C标准，保留空格和换行相同点：这两个属性是可读的
         var context=document.querySelector("#content")
         var context1=document.querySelector("#bt")
          context1.innerHTML ="<h1>今天是：2019 </h1>"
         context.innerText="改变元素内部的内容"
         var p=document.querySelector("p")
         console.log(p.innerHTML);  //W3C标准，保留空格和换行
        console.log(p.innerText);  //去除空格和换行

（2）改变元素的属性如：修改input的type属性

<body>
    <input type="password" value="">
    <button>点击显示和隐藏密码</button>
</body>
<script>
    var inp=document.querySelector("input")
    var btn=document.querySelector("button")
    var flag=0
    btn.onclick=function(){
        if(flag==0){
            inp.type='text'
          flag=1
        }else{
          
            inp.type="password"
            flag=0
        }
        console.log("212121");
      
    }
</script>

（3）修改元素的样式属性：两种方式
element.style 行内样式操作

//元素.style里面的属性，采取驼峰命名法
  box.onclick=function(){
        console.log("212121");
        box.style.backgroundColor=' red';
    }

element.className 类名样式操作:如果修改样式较多可以采用操作类名来修改元素样式，class因为是一个保留字，所以使用className来操作元素类名属性，className会直接更改元素的类名，会覆盖原先的类名，如果保留原来的类名，又添加新的类名：element.className =“red box”

<body>
   
    <div id="box2"></div>
    <button id="btn1">修改样式</button>
</body>
<style>
    .red{
        color: royalblue;
        font-size: 30px;
        font-weight: bolder;
    }
    #box2{
        width: 100px;
        height: 100px;
        background-color: rgb(100, 190, 226);
    }
    .box{
        width: 200px !important;
        height: 200px !important;
        background-color: rgb(182, 5, 34) !important;
    }
</style>
<script>
    var box=document.querySelector("#box2")
    var flag=0
    btn.onclick=function(){
        if(flag==0){
            inp.type='text'
          flag=1
        }else{
          
            inp.type="password"
            flag=0
        }
        console.log("212121");
      
    }
    box.onclick=function(){
        console.log("212121");
        this.className ="box";
        this.className ="red box";//保留原来的类名
    }
</script>

操作多个DOM元素
（1）排他思想:如果有同一组元素，但我只想要某一个元素实现某个样式，就需要用到循环的排他思想
步骤：先清除所有的样式，再给当前元素设置样式

<body>
    <div>
    <!-- 点击切换样式 -->
        <ul>
            <li>英语</li>
            <li>英语1</li>
            <li>英语2</li>
            <li>英语3</li>
            <li>英语4</li>
        </ul>
    </div>
</body>
<style>
    div{
        width: 300px;
        height: 30px;
        background-color: rgb(248, 227, 227);
    }
    ul{
        padding: 0px;
        display: flex;
        justify-content: space-around;
    }
    li{
        width: 50px;
        height:30px ;
        list-style: none;
        background-color: yellow;
    }
    .li1{
        background-color: royalblue;
    }
</style>
<script>
    var ul1=document.querySelector("ul")
    var li1=document.querySelectorAll("li")
    console.log(li1);
    for(var i=0;i<li1.length;i++){     
        li1[i].onclick=function () {
            for(var i=0;i<li1.length;i++){
                li1[i].style.backgroundColor=""
            }           
        this.style.backgroundColor="pink"
    }
    }  
</script>

如何创建元素
如何操作DOM的节点

weixin_45989924

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM的基础知识

DOM的基础知识什么是DOMDOM:Document Object Model 文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口 B:浏览器O:对象M:模型，W3C定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式DOM的简介DOM树：如何获取页面元素document文档对象提供了一系列的api方法，可以方便我们操作dom数上面的节点getElementById根据id属性获取到页面上唯一的一个元素https://developer.mo
复制链接

扫一扫