<div id="time">2020-9-27</div>

    <script>

        //文档页面从上往下加载，先有标签才能获取元素对象，script写到标签的后面

        // get获得element元素by通过驼峰命名法

        //参数id是大小写敏感的字符串
        //返回的是一个元素对象

        var timer = document.getElementById('time');

        console.log(timer);

        console.log(typeof timer);

        console.dir(timer);

    </script>

排他算法

        var btnLis = document.querySelectorAll('button');

        for (var i = 0; i < btnLis.length; i++) {

            btnLis[i].onclick = function () {

                for (var j = 0; j < btnLis.length; j++) {

                    btnLis[j].style.backgroundColor = '';

                }

                this.style.backgroundColor = 'red';

            }

        }

复选框与全选的实现

    <input type="checkbox" id='all'>全选</input>

    <input type="checkbox" class='a'>单独</input>

    <input type="checkbox" class='a'>单独</input>

    <input type="checkbox" class='a'>单独</input>

    <input type="checkbox" class='a'>单独</input>

    <script>

        var cbLis = document.getElementsByClassName('a');

        var cbAll = document.getElementById('all');

        cbAll.onclick = function () {  //全选控制

            for (var i = 0; i < cbLis.length; i++) {

                cbLis[i].checked = this.checked;

            }

        }

        for (var i = 0; i < cbLis.length; i++) {  //子选框控制全选按钮

            cbLis[i].onclick = function () {

                var flag = true;

                for (var i = 0; i < cbLis.length; i++) {

                    if (cbLis[i].checked == false) {

                        flag = false;

                        break;

                    }

                }

                cbAll.checked = flag;

            }

        }

    </script>

论坛发布评论实现

    <textarea name="" id="" cols="30" rows="10">123</textarea>

    <button>发布</button>

    <ul>

    </ul>

    <script>

        //获取元素对象

        var btn = document.querySelector('button');

        var text = document.querySelector('textarea');

        var ul = document.querySelector('ul');

        btn.onclick = function () {  //发布按钮点击事件

            if (text.value == '') {

                alert('没有输入内容');

                return false;

            } else {

                var li = document.createElement('li');

                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";

                ul.insertBefore(li, ul.children[0]);

            }

            var as = document.querySelectorAll('a');

            for (var i = 0; i < as.length; i++) {

                as[i].onclick = function () {   //删除链接点击事件

                    ul.removeChild(this.parentNode);

                }

            }

        }

鼠标移动天使跟随案例

<style>

    body {

        background-color: black;

    }

    img {

        position: absolute;

        width: 200px;

    }

</style>

<body>

    <img src="../images/pic.gif" alt="">

</body>


<script>

    var pic = document.querySelector('img');

    document.addEventListener('mousemove', function (e) {

        var x = e.pageX;

        var y = e.pageY;

        pic.style.left = (x - 100) + 'px';

        pic.style.top = (y - 75) + 'px';

    })

</script>

鼠标按s光标到文本框内

<body>

    <input type="text">

    <script>

        var search = document.querySelector('input');

        document.addEventListener('keyup', function (e) {

            if (e.keyCode === 83) {

                search.focus();

            }

        })

    </script>

</body>

倒计时隐藏盒子

<body>

    <input type="text">

    <script>

        var search = document.querySelector('input');

        setTimeout(function () {

            search.style.display = 'none';

        }, 3000)

    </script>

</body>

JavaScript核心 Dom Bom的更多相关文章

  1. JavaScript HTML DOM,BOM

    DOM DOM 是一个 W3C (万维网联盟) 标准. DOM 定义了用于访问文档的标准: "W3C 文档对象模型 (DOM) 是一个平台和与语言无关的界面, 允许程序和脚本动态访问和更新文 ...

  2. JavaScript 之DOM&BOM

    重点来了 : BOM对象 window对象 : 所有浏览器都支持window对象. 概念上讲 : 一个html文档对应一个window对象. 功能上讲 : 控制浏览器窗口的. 使用上讲 : windo ...

  3. javaScript之DOM,BOM

    javaScript之BOM / DOM: BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ...

  4. JavaScript（核心、BOM、DOM）

    http://www.flyne.org/article/407 JavaScript(核心.BOM.DOM) JavaScript是基于对象和事件驱动的客户端脚本语言.有如下特点: 交互性 安全性( ...

  5. JavaScript的组成 | DOM/BOM

    往期回顾 在上一期的<JavaScript的组成 | 核心-ECMAScript >☜里,我们有说到JavaScript 是由三大部分组成,分别是:核心ECMAScript.文档对象模型- ...

  6. JavaScript组成—— DOM、BOM、ECMAScript

    ECMAScript是JS的核心:提供核心语言功能 DOM(文档对象模型):提供访问和操作网页内容的方法和接口 BOM(浏览器对象模型):提供与浏览器交互的方法和接口 1. DOM(文档对象模型) 1 ...

  7. javascript学习笔记 BOM和DOM详解

    js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W ...

  8. HTML与DOM BOM javascript

    1.什么是DOM? 简单说就是DOM规定了HTML,XML等的一些文档映射规范,使JavaScript可以根据这些规范来进行获取元素,在元素上进行各种操作,使得用户页面可以动态的变化,从而大大使页面的 ...

  9. [转] JavaScript学习：BOM和DOM的区别和关联

    BOM 1.  BOM是Browser Object Model的缩写,即浏览器对象模型. 2.  BOM没有相关标准. 3.  BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系 ...

随机推荐

  1. 【转】Locust性能-零基础入门系列(2) -重写wait_time

    在虚拟模拟的时候,可能对等待时间有更高的要求,比如假如有这么一个场景要求:某任务要求每被执行1次,那么下次的等待时间就1秒钟.这种情况,是可以实现的,这也就体现了Locust的灵活性.可编程性,很多比 ...

  2. Shell学习（四）Shell运算符

    一.基础运算 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 expr,expr 最常用. expr 是一款表达式计算工具,使用它能完成表达式的求值操作. #计算两个数 ...

  3. 新版 C# 高效率编程指南

    前言 C# 从 7 版本开始一直到如今的 9 版本,加入了非常多的特性,其中不乏改善性能.增加程序健壮性和代码简洁性.可读性的改进,这里我整理一些使用新版 C# 的时候个人推荐的写法,可能不适用于所有 ...

  4. google chrome安装非官方市场插件方法

    1. 下载 Chrome组策略管理模板"chrome.adm"(下载地址):2. Win+R 打开运行,输入 gpedit.msc,确定:3. 依次展开 本地计算机策略 > ...

  5. 智慧矿山-选矿工艺数字 3D 可视化

    前言 现代科技和工业的发展对矿物原料的要求越来越高,直接开采的原矿石往往达不到标准,而原矿通过选矿加工后则可以满足要求.选矿技术在冶金.煤炭.化工.建材和环保等部门都得到应用,对国民经济的发展意义重大 ...

  6. Spring AOP系列(二) — 动态代理引言

    接上一篇Spring AOP系列(一)- 代理模式,本篇来聊聊动态代理. 动态代理与静态代理的区别 要想了解动态代理与静态代理的区别,需要有两个前置知识点:java程序是如何执行的以及类加载机制. j ...

  7. K8S-ETCD数据库备份与恢复

    kubernetes使用etcd数据库实时存储集群中的数据,安全起见,一定要备份 需要指定使用etcdctl的版本 etcd数据库备份是使用数控快照的方式进行备份的,备份后的新数据不会保留,后面创建的 ...

  8. LR之Oracle 2tier协议录制Oracle脚本

    在一次测试中,需用到sql去查询Oracle数据,并去使用改数据时,查阅各种资料终于实现LoadRunner对Oracle数据库进行操作,分享给大家,也与大家共同进步~   同时也可用Loadrunn ...

  9. ucore操作系统学习笔记(二) ucore lab2物理内存管理分析

    一.lab2物理内存管理介绍 操作系统的一个主要职责是管理硬件资源,并向应用程序提供具有良好抽象的接口来使用这些资源. 而内存作为重要的计算机硬件资源,也必然需要被操作系统统一的管理.最初没有操作系统 ...

  10. Js中Currying的应用

    Js中Currying的应用 柯里化Currying是把接受多个参数的函数变换成接受一个单一参数的函数,并且返回接受余下的参数且返回结果的新函数的技术,是函数式编程应用. 描述 如果说函数式编程中有两 ...