通过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. Git branch && Git checkout常见用法

    https://www.cnblogs.com/qianqiannian/p/6011404.html git branch 和 git checkout经常在一起使用,所以在此将它们合在一起 1.G ...

  2. VC Edit控件单行垂直居中和定制外框的实现

    Edit控件很奇怪,不在WM_PAINT里面画图,且外框也不在WM_NCPAINT里面画,客户区就是整个窗口,非客户区没有.也没有垂直居中风格可以设置.在界面排版的时候,看起来怪怪的. 下面提供Edi ...

  3. Python_tkinter(3)_grid布局

    Grid(网格)布局管理器,是Tkinter里面最灵活的几何管理布局器.注意:不要试图在一个主窗口中混合使用pack和grid. 1.简单的布局 from tkinter import * root ...

  4. spark1.3.x与spark2.x启动executor不同的cpu core分配方式

    ***这里的executor在worker上分配策略以spreadOut 为例*** 1.3版本关键点: for (app <- waitingApps if app.coresLeft > ...

  5. 多线程深入:让你彻底理解Synchronized(转)

    原文:https://www.jianshu.com/p/d53bf830fa09 1. synchronized简介 在学习知识前,我们先来看一个现象: public class Synchroni ...

  6. opencart精简checkout购物流程

    最近在做一个商城项目,让外国朋友帮忙看看,他给我们一些建议了,其中他说Can You make more simple buying Button,3 step:Sign up :Shipping A ...

  7. 导出IndoorGML

    导出IndoorGML

  8. 【Idea】-NO.163.Idea.2 -【How to show the horizontal scroll?】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  9. C# 按不同的字节编码,通过字节数去截取字符串

    /// <summary> /// 按不同的字节编码,通过字节数去截取字符串 /// 数据库UTF-8 1个数字.字母.英文符号算1个长度 1个中文.中文符号算3个长度 /// </ ...

  10. PyTorch常用代码段整理合集

    PyTorch常用代码段整理合集 转自:知乎 作者:张皓 众所周知,程序猿在写代码时通常会在网上搜索大量资料,其中大部分是代码段.然而,这项工作常常令人心累身疲,耗费大量时间.所以,今天小编转载了知乎 ...