js输入框无值按钮禁用_JS 基础课之 DOM操作

最新推荐文章于 2022-06-27 20:29:13 发布

weixin_39957805

最新推荐文章于 2022-06-27 20:29:13 发布

阅读量178

点赞数

文章标签： js输入框无值按钮禁用

前端入门系列视频教程：

前端基础16课--从入门到放弃 - 网易云课堂study.163.com

首先，什么是DOM？

DOM可以通俗的理解为 HTML 结构，来看某不存在网站的首页

如果不考虑样式，这个页面的HTML可以简化成下面这样

<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <img src="..." />
    <input placeholder="请输入要查找的内容" />
    <div class="actions">
      <button id="search">Google搜索</button>
      <button id="lucky">手气不错</button>
    </div>
  </body>
</html>

我给元素添加了 id和 class属性，以便后续讲解

这个HTML结构也可以换一种展现方式：

DOM Tree

这种形式也叫 DOM树，DOM树还可以进一步的用对象的方式来表示：

let document = {
  html: {
    head: {
      meta: { charset: 'UTF-8'}
    },
    body: {
      image: { src: '...' },
      input: ...,
      div: {
        button: ...,
        button: ...
      }
    }
  }
}

这就是DOM——文档对象模型（document object model）

计算机内存最终以这种形式来保存 HTML 页面

实际dom对象结构比这个复杂，此处简化以便讲解

DOM操作

计算机世界的操作，无外乎增删改查

1、查找元素

DOM操作的前提是，选择想要操作的元素。查找元素的方法有两种：

// 查找第一个符合条件的元素
document.querySelector('#search'); 
document.querySelector('.actions #search');  // 嵌套查询
document.querySelector('input').value; // 查询元素的属性


// 查找符合条件的所有元素，返回数组
document.querySelectorAll('.actions');

细心的你可能发现，这两个函数的入参，和 CSS 选择器一致，是的，CSS 选择器怎么用，这里就怎么用

2、增加元素

我们现在往.actions中再添加一个关闭按钮

// 新建关闭按钮元素
let closeBtn = document.createElement('button');
closeBtn.innerText = '关闭';

// 插入关闭按钮到按钮组末尾
let buttons = document.querySelectorAll('.actions');
buttons.appendChild(closeBtn);

这样就在按钮组中添加了一个关闭按钮，你可能要问：如果我想把这个按钮添加到开头呢？

你可以这样搜索：dom insert first place，试试自己找到答案

3、删除元素

现在，我们要把手气不错按钮删掉

let luckyBtn = document.querySelector('#lucky');
luckyBtn.remove();

4、修改元素

将手气不错按钮文字改为试试手气

let luckyBtn = document.querySelector('#lucky');
luckyBtn.innerText = '试试手气';

你甚至可以用 innerHTML属性来修改元素内部的 HTML

给输入框默认值

let searchInput = document.querySelector('#search');
searchInput.value = '前端同学';

和之前一样，关于 DOM操作，我也是只列出了常用的几个方法，以便你可以快速了解，有其它需求，请自行谷歌

更多关于 CSS 和 JS 的文章：布谷：前端基础课

weixin_39957805

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js输入框无值按钮禁用_JS 基础课之 DOM操作

前端入门系列视频教程：前端基础16课--从入门到放弃 - 网易云课堂study.163.com首先，什么是DOM？DOM可以通俗的理解为 HTML 结构，来看某不存在网站的首页如果不考虑样式，这个页面的HTML可以简化成下面这样<我给元素添加了id和class属性，以便后续讲解这个HTML结构也可以换一种展现方式：DOM Tree这种形式也叫 DOM树，DOM树还可以进一步的用对象的方式...
复制链接

扫一扫