DOM元素操作

最新推荐文章于 2024-11-07 17:01:30 发布

原创最新推荐文章于 2024-11-07 17:01:30 发布 · 297 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

Javascript 专栏收录该内容

14 篇文章

订阅专栏

Web APIS：BOM和DOM

Web API：是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

1.DOM

DOM：文档对象模型，是W3C组织推荐的处理可拓展标记语言(HTML或XML)的标准编程接口

改变网页的内容，结构等

文档：一个页面就是一个文档，DOM中用document表示

元素：页面中的所有标签都是元素，DOM中用element表示

节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM用node表示

DOM把以上都看作对象

1.1 获取元素

1.1.1 根据ID获取

语法

var num=document.getElementById('id')

<body>
  <div id="time">2019-99-90</div>
  <script>
    var ele = document.getElementById('time');
    console.log(ele);
    //打印返回的元素对象，查看属性和方法
    console.dir(ele);
  </script>
</body>

1.1.2 根据标签名获取

var ele=document.getElementsByTagName()
//返回带有指定标签名的对象的集合

<body>
  <ul>
    <li>你好你好</li>
    <li>你好你好</li>
    <li>你好你好</li>
    <li>你好你好</li>
    <li>你好你好</li>
    <li>你好你好</li>
  </ul>
  <script>
    var ele = document.getElementsByTagName('li');
    console.log(ele);//返回对象集合，以为数组形式保存，只有一个也是伪数组，没有元素就是空的伪数组
    console.dir(ele);
    //遍历对象
    for (var i = 0; i < ele.length; i++) {
      console.log(ele[i])
    }
  </script>
</body>

还可以获取父元素内部所有指定标签名的子元素,注意父元素必须是单个对象，获取的时候不包括父元素自己，其中element表示父元素

var ele=element.getElementsByTagName('标签名')

<body>
  <ul>
    <li>你好你好</li>
    <li>你好你好</li>
    <li>你好你好</li>
    <li>你好你好</li>
    <li>你好你好</li>
    <li>你好你好</li>
  </ul>
  <ol>
    <li>hhhhjjjjjj</li>
    <li>hhhhjjjjjj</li>
    <li>hhhhjjjjjj</li>
    <li>hhhhjjjjjj</li>
  </ol>
  <script>
    var ele = document.getElementsByTagName('li');
    console.log(ele);//返回对象集合，以为数组形式保存
    console.dir(ele);
    //遍历对象
    for (var i = 0; i < ele.length; i++) {
      console.log(ele[i])
    }
    var ole = document.getElementsByTagName('ol');
    console.log(ole);
    // var olee = ol.getElementsByTagName('li');
    // console.log(olee);//这里报错，父元素必须是单一指定的元素，用为伪元素数组是不行的
    var olee = ole[0].getElementsByTagName('li');
    console.log(olee);//指定父元素后可以执行
  </script>
</body>

1.1.3 通过HTML5新增的方法获取（IE9以上支持）

var ele=document.getElementsByClassName()

var ele=document.querySelector('选择器')//返回指定选择器的第一个对象

var ele=document.querySelectorAll('选择器')
返回指定选择器的所有元素

<body>
  <div class="box">盒子</div>
  <div class="box">盒子</div>
  <div id="nav">
    <ul>
      <li>首页</li>
      <li>产品</li>
    </ul>
  </div>
  <script>
    // 1.document.getElementsByClassName()
    var ele = document.getElementsByClassName('box');
    console.log(ele);//获取伪数组
    // 2.document.querySelector()
    var firstBox = document.querySelector('.box');
    console.log(firstBox);
    var nav = document.querySelector('#nav');
    console.log(nav)
    // 3.document.queySelectorAll()
    var lis = document.querySelectorAll('li');
    console.log(lis);

  </script>
</body>

1.1.4 特殊元素获取

获取body元素
var bodyEle=document.body

获取html元素
var htmlEle=document.documentElement

<body>
  <script>
    // 1.获取body元素
    var bodyEle = document.body;
    console.log(bodyEle);
    // 2.获取html元素
    var htmlEle = document.documentElement;
    console.log(htmlEle);
  </script>

</body>

1.2 事件基础

1.2.1 事件三要素

（1）事件源事件被触发的对象

（2）事件类型如何触发什么事件

（3）事件处理程序通过函数赋值完成

<body>
  <button id="btn">唐伯虎</button>
  <script>
//第一步  获取元素
    var btn = document.getElementById('btn');
//第二步 绑定事件 btn.onclick
//第三步 添加事件处理程序(采用函数赋值的形式)   function(){alert('hhhh')}
    btn.onclick = function () {
      alert('hhhh')
    }
  </script>

</body>

<body>
  <div>123</div>
  <script>
    var dive = document.querySelector('div');
    dive.onclick = function () {
      console.log('我被选中了')
    }
  </script>

</body>

1.2.2 操作元素

1.2.2.1 改变元素内容

element.innerText
从起始位置到终止位置的内容，但他去除HTML标签，同时空格和换行也会去掉
不识别html标签，而是直接显示

element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
可以识别html标签  W3C推荐
可读写

<body>
  <button>显示当前系统时间</button>
  <div>某个时间</div>
  <p>123</p>
  <script>
    //  1.获取元素
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    //2.注册事件，绑定函数
    btn.onclick = function () {
      div.innerText = getDate();
    }
    function getDate() {
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      var dates = date.getDate();
      var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      var day = date.getDay();
      return '今天是' + y + '年' + m + '月' + dates + '日' + arr[day];

    }
    //元素不添加事件,直接显示
    var p = document.querySelector('p');
    p.innerText = getDate();
  </script>

</body>

<body>
  <div></div>
  <p>
    我是文字
    <span>123</span>
  </p>
  <script>
    var div = document.querySelector('div');
    div.innerHTML = '<Strong>今天是<Strong>2022';//把内容按照格式写进了div中
    //属性可读写
    var p = document.querySelector('p');
    console.log(p.innerText);//我是文字
    console.log(p.innerHTML);//    <span>123</span>

  </script>

</body>

1.2.2.2 改变元素属性

<body>
  <button id="dog">小狗</button>
  <button id="cat">小猫</button>
  <img src="https://img1.baidu.com/it/u=282437153,615145484&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=677" alt="">
  <script>
    var dog = document.getElementById('dog');
    var cat = document.getElementById('cat');
    var img = document.querySelector('img');
    dog.onclick = function () {
      img.src = 'https://img1.baidu.com/it/u=282437153,615145484&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=677';
      img.title = '小狗';
    }
    cat.onclick = function () {
      img.src = 'https://img1.baidu.com/it/u=4127173262,3020090260&fm=253&fmt=auto&app=138&f=JPG?w=500&h=753';
      img.title = '小狗';
    }
  </script>

</body>

1.2.2.3 表单属性操作

type,value,checked,selected,disabled

以上利用DOM可操作

<body>
  <button>按钮</button>
  <input type="text" value="输入内容">
  <script>
    //1.获取元素 
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    //注册事件，添加事件处理函数
    btn.onclick = function () {
      //表单里面的值使通过改变value来实现的
      input.value = '被点击了';
      //想要某个表单不能被点击，用disabled
      // btn.disabled = true;
      this.disabled = true;//this指向的是事件函数的调用者，btn调用了，故指向btn
    }
  </script>
</body>

1.2.2.4 样式属性操作

1.行内样式操作
适合样式少

element.stytle

2.类名样式操作

element.className

适合样式修改过多的情况，使用className操作属性，className会直接更改元素类名，并覆盖原先的类名

注意：JS里面的样式采取驼峰命名法,比如fontSize，backgroundColor
JS修改style样式操作，产生的是行内样式，CSS权重较高

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    div.onclick = function () {
      //属性采取驼峰命名法
      div.style.backgroundColor = 'green'
    }
  </script>
</body>

点击关闭二维码案例

<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>
  <style>
    div {
      width: 200px;
      height: 200px;
      margin-left: 50px;
      margin-top: 50px;
    }
    img {
      width: 160px;
      height: 160px;
    }
    .close {
      float: left;
      width: 5px;
      height: 5px;
    }
  </style>
</head>
<body>
  <div>
    <img src="https://img2.baidu.com/it/u=4201712364,1554591936&fm=253&fmt=auto&app=138&f=JPEG?w=622&h=500" alt="">
    <i class="close">x</i>
  </div>
  <script>
    var close = document.querySelector('.close');
    var div = document.querySelector('div');
    close.onclick = function () {
      div.style.display = 'none';
    }
  </script>
</body>

循环精灵图

<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>
  <style>
    li {
      width: 52px;
      height: 52px;
      background-color: pink;
      background-image: url('https://img1.baidu.com/it/u=430449616,603089271&fm=253&fmt=auto&app=138&f=PNG?w=621&h=354');
    }
  </style>

</head>

<body>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <script>
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
      // var index = -52 + i * 197;
      // lis[i].style.backgroundPosition = "-113 -" + index + 'px'
      lis[0].style.backgroundPosition = "-115 -52px"
    }
  </script>
</body>

显示或隐藏文本框内容

 <style>
    .box {
      width: 610px;
      height: 20px;
    }

    input {
      float: left;
      width: 450px;
      height: 20px;
      outline: none;
      color: grey;
    }

    button {
      float: left;
      width: 150px;
      height: 26px;
      border: none;
      background-color: aquamarine;
    }
  </style>

<body>
  <div class="box">
    <input type="text" value="手机">
    <button>搜索</button>
  </div>
  <script>
    var text = document.querySelector('input');
    text.onfocus = function () {
      if (this.value === '手机') {
        this.value = '';
        this.style.color = 'black';
      }
    }
    text.onblur = function () {
      if (this.value === '') {
        this.value = '手机';
        this.style.color = 'grey';
      }
    }
  </script>
</body>

className使用

 <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
      font-size: 20px;
      color: white;
    }

    .change {
      width: 400px;
      height: 400px;
      background-color: purple;
    }
  </style>
<body>
  <div class="first">你好</div>
  <script>
    var div = document.querySelector('div');
    div.onclick = function () {
      // this.className = 'change';
      // 若想保留原来的类
      this.className = 'first change';
    }
  </script>
</body>

密码框信息验证，改变不同的类

<style>
    .box {
      width: 600px;
      height: 25px;
      border: 1px solid blue;
    }

    input {
      width: 250px;
      height: 20px;
      outline: none;
    }

    .content {
      float: right;
      width: 320px;
      height: 25px;

    }

    .normal {
      float: right;
      width: 320px;
      height: 25px;
      background: url('https://img0.baidu.com/it/u=4184585164,1563174338&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
      background-size: 25px, 25px;
      background-position: 500px;
      /* background-repeat: no-repeat; */

    }

    .error {
      float: right;
      width: 320px;
      height: 25px;
      background: url('https://img1.baidu.com/it/u=703832724,2711073043&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
      background-size: 25px, 25px;
      background-position: 500px;
      /* background-repeat: no-repeat; */

    }

    .right {
      float: right;
      width: 320px;
      height: 25px;
      background: url('https://img2.baidu.com/it/u=2813053371,3896720928&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
      background-size: 25px, 25px;
      background-position: 500px;
      /* background-repeat: no-repeat; */

    }
  </style>
<body>
  <div class="box">
    <input type="password">
    <div class="content"></div>
  </div>
  <script>
    var input = document.querySelector('input');
    var msg = document.querySelector('.content');
    input.onfocus = function () {
      msg.className = 'content normal';
      msg.innerHTML = '请输入密码';
      if (input.value.length <= 0 || input.value.length > 6) {
        msg.className = 'content error';
        msg.innerHTML = '输入错误，虫棍输入';
      } else {
        msg.className = 'content right';
        msg.innerHTML = '输入成功'
      }
    }
  </script>
</body>