js备战春招の四のDOM
通过js查找html元素的三种方法:
1、通过id找到html元素。
2、通过标签名找到html元素。
3、通过类名找到html元素。
DOM HTML
document.write(); 直接写入html中
document.getElementById(id).innerHTML=新的html; 修改html中的内容
document.getElementById(id).innerHTML 获取相应id下的镶嵌内容
document.getElementById(id).attribute(这里的attribute是属性的意思,在语法中应该写入相应的属性标签才行,而不是写入attribute)=新属性值; 改变html属性值(包含相应事件分配属性的存在)
document.getElementById(id).onclick=function(){xxxxxx};
onload&onunload事件
onchange事件 <input type="text" id="fname" onchange="upperCase()">
onmouseover&onmouseout
onmousedown&onmouseup
onclick
onfocus
onload
DOM CSS
document.getElementById(id).style.property(这里的意思是选取其中的一个css来写入,后面跟着相应的样式值。)=新样式
visibility:表示元素显示或者隐示,(visible表示出现,hidden表示隐藏)
DOM EventListener

默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
在添加多个时依次添加,而不是一次在addEventlistener
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
emoveEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:其语法同addEventListener相同。第一个为事件的类型,第二个为接下来事件触发后调用的函数。
创建新的html元素

删除已有的html元素

js备战春招の四のDOM的更多相关文章
- js备战春招の四のjs函数
1.普通函数声明: 2.函数表达式:函数表达式可以存储在变量中,在函数表达式存储在变量后,变量也可作为一个函数使用: 以上函数实际上是一个 匿名函数 (函数没有名称).函数存储在变量中,不需要函数名称 ...
- js备战春招の四の表单
表单验证:required="required"(浏览器自动验证) javascript表单验证: <input id="numb">这条html标 ...
- js备战春招の四の严格模式
JavaScript 严格模式(strict mode)即在严格的条件下运行. use strict 严格模式下你不能使用未申明的变量 "use strict" 指令只运行出现在脚 ...
- js备战春招の四のdevtool中各种错误、调试的使用技巧
try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块. JavaScript 语句 try 和 catch 是成对出现的. ...
- js备战春招の四の正则表达式详解
正则表达式语法规则:/正则表达式主体/修饰符(可选)什么是正则表达式:正则表达式是用于匹配字符串中字符组合的模式.在 JavaScript中,正则表达式也是对象.这些模式被用于 RegExp 的 ex ...
- js备战春招の三
DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准. window.alert() 弹出警告框. document.write() 方 ...
- 备战春招!开源社区系统 Echo 超全文档助力面试
博主东南大学硕士在读,寒假前半个月到现在差不多一个多月,断断续续做完了这个项目,现在终于可以开源出来了,我的想法是为这个项目编写一套完整的教程,包括技术选型分析.架构分析.业务逻辑分析.核心技术点分析 ...
- CSS备战春招の二
CSS:层叠样式表 CSS注释形式:/* */ class 选择器有别于id选择器,class可以在多个元素中使用 id属性不要以数字开头,以数字开头在特定浏览器中不起作用 类名的第一个字符不要使用 ...
- html备战春招の一
html不是一种编程语言,而是一种标记语言,通过使用标签来标记网页. 对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码.有些 ...
随机推荐
- Quartz任务调度
狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! Quartz任务调度 课程目标 : 了解Quartz框架 : 任务(Job) 触发器(Trig ...
- oracle DML语句 事务的定义与特点
1.insert into (插入数据) insert in to 表名(列表1,列表2) values(要插入的数据1,数据2); or insert into 表名 values(数据 ...
- VUE项目注意点
1.vue组件中img标签的src属性绑定数据: <img :src="img" alt="图片" /> //scriptdata() { img: ...
- rpm和yum模拟安装
在更新安装包之前,我们可能会想做一个测试运行,换句话说,模拟而不是实际安装更新的包,以确定在安装之前是否有任何需要处理的问题. 以测试更新openssh2为例: yum update openssh2 ...
- vue页面无操作10分钟内调转到登录页面
https://blog.csdn.net/lbPro0412/article/details/83864454 页面在设定时间内无任何操作(鼠标的点击.滑动.路由的切换.是否请求接口等),跳转到登录 ...
- python-迭代器与可迭代对象
迭代器与可迭代对象 简述 迭代是数据处理的基石.扫描内存中放不下的数据集时,我们要找到一种惰性获取数据项的方式,即按需一次获取一个数据项.这就是迭代器模式 迭代器 迭代器是这样一个对象,实现了无参数_ ...
- laravel中get()与 first()区别、collection与stdClass的区别
简单的,laravel里get()得到的是一组数据,first()得到的是一个model数据. 从形式上,laravel里每一个model数据(record),在取出的时候都是用的PHP的stdCla ...
- NuGet的简单使用
什么是NuGet? NuGet(读作New Get)是用于微软.NET开发平台的软件包管理器,是一个Visual Studio的扩展.在使用Visual Studio开发基于.NET Framewor ...
- 安装完Ubuntu后要做的事情
Ubuntu 16.04安装完成后,还需要做一些配置才能愉快的使用,所以装完系统后还要进行一系列的优化. 1.删除libreoffice libreoffice虽然是开源的,但是Java写出来的off ...
- Kindle:自动追更之Calibre2脚本
#!/usr/bin/env python2 # vim:fileencoding=utf-8 from __future__ import unicode_literals, division, a ...