通过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的更多相关文章

  1. js备战春招の四のjs函数

    1.普通函数声明: 2.函数表达式:函数表达式可以存储在变量中,在函数表达式存储在变量后,变量也可作为一个函数使用: 以上函数实际上是一个 匿名函数 (函数没有名称).函数存储在变量中,不需要函数名称 ...

  2. js备战春招の四の表单

    表单验证:required="required"(浏览器自动验证) javascript表单验证: <input id="numb">这条html标 ...

  3. js备战春招の四の严格模式

    JavaScript 严格模式(strict mode)即在严格的条件下运行. use strict 严格模式下你不能使用未申明的变量 "use strict" 指令只运行出现在脚 ...

  4. js备战春招の四のdevtool中各种错误、调试的使用技巧

    try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块. JavaScript 语句 try 和 catch 是成对出现的. ...

  5. js备战春招の四の正则表达式详解

    正则表达式语法规则:/正则表达式主体/修饰符(可选)什么是正则表达式:正则表达式是用于匹配字符串中字符组合的模式.在 JavaScript中,正则表达式也是对象.这些模式被用于 RegExp 的 ex ...

  6. js备战春招の三

    DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准. window.alert() 弹出警告框. document.write() 方 ...

  7. 备战春招!开源社区系统 Echo 超全文档助力面试

    博主东南大学硕士在读,寒假前半个月到现在差不多一个多月,断断续续做完了这个项目,现在终于可以开源出来了,我的想法是为这个项目编写一套完整的教程,包括技术选型分析.架构分析.业务逻辑分析.核心技术点分析 ...

  8. CSS备战春招の二

    CSS:层叠样式表 CSS注释形式:/*  */ class 选择器有别于id选择器,class可以在多个元素中使用 id属性不要以数字开头,以数字开头在特定浏览器中不起作用 类名的第一个字符不要使用 ...

  9. html备战春招の一

    html不是一种编程语言,而是一种标记语言,通过使用标签来标记网页. 对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码.有些 ...

随机推荐

  1. u-boot调试串口输出对应的系统函数

    接上Debug串口,启动机器,u-boot哗啦啦地打印一行行的字符.刚接触u-boot的时候,对机器后台做了什么,几乎一无所知. 如果要很有信心地定制出一个简单并且可靠的系统,或者快速完成一项新的任务 ...

  2. 栈->栈与递归

    文字简述 1.阶乘函数 2.2阶Fiibonacci数列 3.n阶Hanoi塔问题 代码实现 // // Created by lady on 19-4-3. // #include <stdi ...

  3. xtrabackup工具备份与恢复

    1.xtrabackup简介 Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具InnoDB Hotbackup的一个很好的替代品.它能对 ...

  4. MailKit使用IMAP读取邮件找不到附件Attachments为空的解决方法

    今天发现有些邮件无法读取Attachments,邮件明明有附件,但使用Mailkit读取时,Attachments为空,我用的IMAP协议读取收件箱里的邮件,处理完后移动已删除: foreach (v ...

  5. 关于Oracle的44951事件

    最近有同事遇到某客户数据库产生大量阻塞,等待事件为:enq HW - contention,最开始采用不断杀会话的方式,效果不好,问题一直高频反复.进一步确认SQL是大量的insert,且插入的表中含 ...

  6. [Docker] sh: docker-compose: not found

    有点坑爹,在使用  alpine 镜像的时候,明明在里面安装了docker-compose,/usr/local/bin/docker-compose也是存在的,却报 sh: docker-compo ...

  7. nodejs:导出Excel和解析导入的Excel

    用的是koa2框架,但好好处理一下,用express框架也是可以的.导出的Excel是xlsx的格式,解析导入Excel的有xlsx和csv格式.通常导入Excel是要上传的,然后获取文件的路径,这里 ...

  8. 论文速读(Chuhui Xue——【arxiv2019】MSR_Multi-Scale Shape Regression for Scene Text Detection)

    Chuhui Xue--[arxiv2019]MSR_Multi-Scale Shape Regression for Scene Text Detection 论文 Chuhui Xue--[arx ...

  9. 彻底卸载Xubuntu Kubuntu

    卸载Xubuntu -linux-gnu blueman brltty brltty-x11 catfish cheese-common dbus-user-session dconf-cli deb ...

  10. java基础语法-内部类与匿名内部类

    1.成员内部类(声明在类内部&&方法之外) class Person{ String name = "韩梅梅"; int age; class Bird{ Stri ...