Javascript——(2)DOM
1、DOM
1)直接寻找
(1)document.getElementById() //根据ID获取一个标签;
(2) document.getElementsByName() //根据name属性获取标签集合;
(3) document.getElementsByTagName() //根据标签名获取标签集合;
(4) document.getElementsClassName() //根据Class属性获取标签集合;
2) 操作标签
a.innerText
获取标签中的文本内容;标签.innerText
对标签内部文本进行重新赋值 标签.innerText = ""
b.className
tag.className 直接整体做操作
tag.classList.add('className') 在之前的基础上添加指定样式;
tag.classList.remove('className') 删除当前样式;
c.innerHTML全部内容,找到所要找的标签,输出标签内的所有内容,包括其中的HTML标签,而innerText只是输出其中的文本;
当为innerHTML赋值时,如果有HTML标签,则之间将对应的标签转化为标签的效果,而不会当文本输出;
3)对input标签来说,假设input的标签id='i1';则 var obj = document.getElementById('i1'); obj.value的结果为输出input中的内容,
若obj.value=‘我爱你中国’;则表示将input的文本框中的内容更新为:我爱你中国;
4)对select标签来说,同样可以获取选定的value值,同时也可以对值进行赋值;select有自己特殊的selectIndex,可以通过对selectIndex赋索引值也可以
改变选中的结果;
5)属性操作:
obj.attributs表示获取某个标签中的所有属性,以数组的形式存放,obj.attributes[2]表示获取属性列表中的第三个属性值;
obj.setAttributs表示将某个属性设置为多少;
obj.removeAttributs表示将某个属性删除;
6)插入标签
7、提交表单
任何一个标签都可以通过,onclick事件来提交;
8、alert('您输入的有误,请重新输入!!')弹出警示对话框;
confirm()弹出确认对话框;
console.log()在当前命令行输出;
location.href获取当前的url; location.href='https://www.baidu.com';跳转到百度; location.reload表示刷新,等价于location.href === location.href;
var obj = setInterval(函数名,时间)表示每间隔多久执行一次;
clearInterval(obj)表示清除定时器;
var s1 = setTimeout(function(){},时间) 表示多长时间后开始执行function;
clearTimeout(s1)表示清楚setTimeout的函数设置;
9、当前触发事件的标签;
a、第一种绑定方式;
<tr onmouseover="t1(this);"><td>1</td><td>2</td><td>3</td></tr>
在事件中添加this,当调用事件函数时,将this传递给事件执行函数,就可以直接应用了,this即表示当前标签;
b、第二种绑定方式:
<input id='i1' type='button'>
document.getElementById(''i1).onclick = function(){ 函数内部可以直接应用this}
10、注:this的应用场景为啥不能用数组解析;
11、事件中,按执行顺序可分为两种:一种是捕捉,另一种是冒泡;具体如下例子:
12、词法分析;
Javascript——(2)DOM的更多相关文章
- JavaScript(5)——DOM
DOM操作 为了写这一篇随笔真的是费了好多力气,虽然还是写不好.本来是从周一都开始写的,但是周二周三忙着去帮忙招新了,哈哈哈.感觉做自己喜欢的事特别好玩,虽然挺忙的.看着那些小鲜肉,感觉自己真的老了啊 ...
- JavaScript(四)——DOM操作——Window.document对象
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById(&qu ...
- JavaScript(三)——DOM操作一
一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 二.Window对象操作 1.属性和方法: 属性(值或者子对象): op ...
- JavaScript(三)-- DOM编程
JavaScript编程中最基本的就是DOM编程,DOM是 Document Object Model文本对象模型,就是对DOM对象进行编程的过程. Java语言和Js都有针对于DOM的编程,两者类似 ...
- javascript (六)DOM
学习后的总结: DOM:document object model 关于DOM的简介:http://www.w3school.com.cn/htmldom/dom_intro.asp 本文说的是HTM ...
- JavaScript(十一)Dom
Dom(Document object module) 1.获取dom对象的方法 正常用的方法 推荐 getElementById()//通过id选择唯一的dom getElementsByClass ...
- JavaScript(7)——DOM
什么是 DOM? DOM是 Document Object Model(文档对象模型)的缩写 DOM是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: “W3C ...
- Day4 JavaScript(二)dom操作
dom(文档对象模型) 文档结构 文档加载,转换为文档对象模型.将所有的标签,文本,属性转换为dom节点,形成一棵dom树. 标签,元素,节点: <a> 标签开始到结束的部分 标签,文本, ...
- 初探JavaScript(三)——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
随机推荐
- phpstorm实用技巧
1.切换php代码版本提示 1.1找到External Libraries右键点击(configure PHP Include Paths) 1.2切换提示版本(在这里切换版本)确定即可 2.生成ge ...
- 关于setTimeout的妙用
定义 在指定的延迟时间之后调用一个函数或执行一个代码片段 这个是setTimeout最主要的功能,但也是很坑的地方,首先javascript其实是运行在单线程的环境下,意味者定时器会在未来的某个时间支 ...
- 1.spring源码-BeanPostProcessor后置处理器
1.BeanPostProcessor接口的介绍: BeanPostProcessor是一个接口,其中有两个方法,postProcessBeforeInitialization和postProcess ...
- webscarab
1.功能 WebScarab是一个用来分析使用HTTP和HTTPS协议的应用程序框架.其原理很简单,WebScarab可以记录它检测到的会话内容(请求和应答),并允许使用者可以通过多种形式来查看记录. ...
- C++-有感
今日在图书馆待了差不多一天,我都忘了我吃饭了没,拿着看视频学习,没啦,主要还是看书,突然感觉有点写不动了. 明天开始不带电脑了,准备把数据结构书重新过一遍,算了,还是不用C++写了,感觉C++居然做题 ...
- 基于Java在线学习系统设计与实现
Spring+SpringMVC+MyBatis+Bootstrap+Vue开发在线学习系统 本课题的主要内容是开发基于Java EE的在线学习平台,使用MVC经典开发模式. ...
- 11g RAC添加用户表空间(数据文件)至文件系统(File System)的修正
前提:非TEMP.UNDO和SYSTEM表空间,这仨是大爷,您得搂着点.来自博客园AskScuti .客户是添加临时表空间数据文件时,不小心 ADD 到了文件系统中,然后发现,后悔了,还在OS层面 R ...
- 载 js验证密码 必须由大小写字母、数字和特殊字符组成
转自:https://blog.csdn.net/weixin_43824935/article/details/93601064 密码长度8-16位 必须由大写字母,小写字母,数字,特殊符号组成 正 ...
- DoS攻击种类
DoS攻击有许多种类,主要有Land攻击.死亡之ping.泪滴.Smurf攻击及SYN洪水等. 据统计,在所有黑客攻击事件中,syn洪水攻击是最常见又最容易被利用的一种DoS攻击手法. 1.攻击原理 ...
- springmvc 整合 redis
引入依赖 <!--redis--> <dependency> <groupId>redis.clients</groupId> <artifact ...