JS DOM重点核心笔记
DOM重点核心
<button>123</button>
<script>
var btn = document.querySelector("button")
btn.onclick = function () {
document.write("<div>123</div>")
}
</script>
<div class="box">
</div>
<script>
var div = document.querySelector(".box")
// for (var i = 0; i < +100; i++) {
// div.innerHTML += "<a href='#'>1234</a>"
// }
var arr = []
for (var j = 0; j <= 100; j++) {
arr.push( '<a href = "#"> 1234 </a>')
}
div.innerHTML = arr.join("")
</script>
<div class="box2">
</div>
<script>
var box2 = document.querySelector(".box2")
for (var i = 0; i <= 100; i++) {
var a = document.createElement("a")
box2.appendChild(a)
}
</script>
增加的主要有
删除
查询
属性操作
事件操作
注册事件的两种方法
方法监听注册方式
<button class="btn2">1234</button>
<script>
var btn = document.querySelector(".btn2")
// 事件监听注册事件 addeventlistenr 里面的事件类型是字符串 必须加引号 而且不带on
btn.addEventListener('click', function () {
alert("88")
})
btn.addEventListener('click', function () {
alert("33")
})
</script>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll("div")
divs[0].onclick = function () {
alert("ok")
divs[0].onclick = null
} divs[1].addEventListener('click', fn)
function fn() {
alert("99")
divs[1].removeEventListener('click', fn)
}
</script>
DOM事件流
注意
<div class="father">
<div class="son">son</div>
</div>
<script>
// 捕获阶段
// var son = document.querySelector(".son")
// son.addEventListener('click', function () {
// alert("00")
// }, true)
// var father = document.querySelector(".father")
// father.addEventListener('click', function () {
// alert("father")
// }, true) // 冒泡阶段 如果第三个参数是false就是冒泡阶段
var son = document.querySelector(".son")
son.addEventListener('click', function () {
alert("00")
}, false)
var father = document.querySelector(".father")
father.addEventListener('click', function () {
alert("father")
}, false)
document.addEventListener('click', function () {
alert("987")
})
</script>
JS DOM重点核心笔记的更多相关文章
- Node.js高级编程读书笔记Outline
Motivation 世俗一把,看看前端的JavaScript究竟能做什么. 顺便检验一下自己的学习能力. Audience 想看偏后台的Java程序员关于前端JavaScript的认识的职业前端工程 ...
- HTML DOM(学习笔记二)
嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...
- Underscore.js 源码学习笔记(下)
上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...
- node的重点学习笔记(1)————node
node的重点学习笔记(1)----node 提到node就必须提一下他的npm了,npm是世界上最大的开放源代码的生态系统.通俗来说这就如同亚马逊丛林,要啥物种有啥物种,一个巨大的生态圈,里面有一堆 ...
- 前端三件套 HTML+CSS+JS基础知识内容笔记
HTML基础 目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签 文本和超链接标签 标题标签 段落标签 换行标签 水平标签 ...
- 货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
随机推荐
- python面试题四:Python web框架
1 django.flask.tornado框架的比较? 2 什么是wsgi? WSGI的全称是Web Server Gateway Interface,翻译过来就是Web服务器网关接口.具体的来说, ...
- sublime text 3+java只编译不输出结果 solution
文章摘自:https://blog.csdn.net/VincentLuo91/article/details/53007135 版权声明:本文为CSDN博主「vincentluo91」的原创文章,遵 ...
- redis(十一):Redis 列表(List) (python)
# -*- coding: utf-8 -*- import redis r =redis.Redis(host="123.156.74.190",port=6379,passwo ...
- tf.nn.conv2d函数和tf.nn.max_pool函数介绍
tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, name=None) 介绍参数: input:指卷积需要输入的 ...
- 开源利器分享:BitBar 坐看今天你的项目涨了多少 star
今天开头我想叨叨几句,我个人最近的感受.在这个信息爆炸,互联网的时代里.我的周遭总是充斥者着各种让人能产生焦虑的信息, 我不知道有没有小伙伴和我一样,看到各种神通广大.游戏人生的大侠,低头看看自己当前 ...
- toad for oracle 小技巧
在SQL*LOADER 工具上(或者称为SQLLDR,读为:“sequel loader”),因为它仍然是装载数据的主要方法,SQLLDR 能够在极短的时间内装 载庞大数量的数据. 我也是初使用,理解 ...
- Windows 磁盘分区后如何再合并&如何用Windows自带工具扩大某个分区
Windows 磁盘分区后如何再合并&用Windows自带工具扩大某个分区 注:此方法有一定的成功率,更加完善可行的方法请看http://www.diskgenius.cn/help/part ...
- django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.解决办法
"E:\API_Manager_PlatForm\venv\lib\site-packages\django\db\backends\mysql\base.py"在这个路径里件把b ...
- STL Queue(队列)学习笔记 + 洛谷 P1540 机器翻译
队(Queue) 队简单来说就是一个先进先出的“栈”,但是不同于标准“栈”的先进后出. 基本操作: push(x) 将x压入队列的末端 pop() 弹出队列的第一个元素(队顶元素),注意此函数并不返回 ...
- java 将整型数组转化为字符串
java arrays 和arrayList 的区别 package com.vc; import java.util.Arrays; public class Demo05 { public sta ...