通过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. Spring cloud 之Ribbon(一)基本使用

    简介 Spring cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具,它是基于Netflix的Riboon实现的.Ribbon是客户端负载均衡器,这有别语例如Nginx服务端负载 ...

  2. mysql--表数据操作

    查询: 简单查询 ####查询的字段必须在表中存在 #### 对查询出来的数据进行修改时,不会修改原来的数据,只是修改了可视化的,我们看到的数据. # 查一个数据 select 字段名 from 表名 ...

  3. html/jsp导出pdf格式的几种方法(jsPDF,iText,wkhtmltopdf)

    在许多生成报表的时候需要我们后台作出动态的数据,并渲染到前端生成pdf格式,Excel格式的各种报表,但是浏览器自带的生成pdf功能,windows系统的ctrl+p键就能完全搞定这一需求,但对客户来 ...

  4. vue js判断长按触发及手指的上滑、下滑、左滑、又滑

    <span class="btn" @touchstart="touchstart()" @touchmove="touchmove()&quo ...

  5. webpack(6)-模块热替代&tree shaking

    模块热替换(hot module replacement 或 HMR) 模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时 ...

  6. [LeetCode] 132. Palindrome Partitioning II_ Hard tag: Dynamic Programming

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...

  7. 两种库解析、构造 JSON

    1.用CJSON库 1.1解析Json 需要解析的JSON文件: { "name":"Tsybius", , "sex_is_male":t ...

  8. .NET 内存分配笔记

    阅读博客http://jonskeet.uk/csharp/memory.html的笔记(个人水平有限,如若翻译.记录有误,请提,谢谢~) 误区:引用类型保持在堆中,值类型保持在栈中. 问题:前半句正 ...

  9. JavaScript监控页面input输入整数且只能输入2位小数

    <input type="text" id="money" /> <script> $(function () { $('#money' ...

  10. 自己写的一些公共js方法

    /* 说明文件:这里用的都是es6的语法 导入导出,拿vue举个栗子,你只需要在用到的地方,按需要导入就行了,然后在mounted中直接可以拿来用 比如下面的手机****方法,在需要用到的地方impo ...