前端基础之JavaScript_(5)_DOM对象总结
DOM 定义了访问和操作HTML文档的标准方法
访问(查找标签)
//---- 直接查找
document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”) //---- 导航属性
NodeElement.parentElement // 父节点标签元素
NodeElement.children // 所有子标签
NodeElement.firstElementChild // 第一个子标签元素
NodeElement.lastElementChild // 最后一个子标签元素
NodeElement.nextElementtSibling // 下一个兄弟标签元素
NodeElement.previousElementSibling // 上一个兄弟标签元素
操作标签:
1 文本操作
取值操作
element.innerHTML (关于标签的操作)
element.innerText (关于文本操作)
赋值操作:
element.innerHTML=""
element.innerText=""
2 属性操作
取属性值: (1)element.getAttribute(属性名)
(2)element.属性名 (推荐)
赋值操作: (1)element.setAttribute(属性名,属性值)
(2)element.属性名=属性值
针对class属性:
(1) element.classlist.add("class值")
(2) element.classlist.remove("class值")
关于select标签:
ele_select.options.length=0 清空操作
ele_select.selectedIndex 选中option的索引值
关于style属性:实现对标签的css操作:
element.style.样式属性="值"
3 节点操作
-----添加标签
生成一个标签:var ele_create=document.createElement("标签名") // <p></p> <img>
添加标签: 父标签.appendChild(添加标签对象)
.insertBefore
-----删除节点: 父标签.removeChild(查找到的标签对象)
-----替换节点:
父标签.replaceChild(newnode,查找到的标签对象)
----- 拷贝一个节点
要拷贝的标签:ElementNode.cloneNode(true); // true 为深度拷贝,拷贝ElementNode标签及子标签,不加true为浅拷贝,只拷贝ElementNode标签
DOM:两种绑定事件方式:
//方式1
<script>
function foo(self){
alert(123) // self: <p onclick="foo(this)"></p>
}
</script>
<p onclick="foo(this)"></p> //方式2:
一个标签对象.on事件=function(){
alert(456) // this:绑定事件的标签对象
}
具体事件
点击事件 onclick
获取/失去焦点 onfocus onblur
内容发生变化 onchange (selecte)
onmouse 与鼠标相关的事件
提交事件:onsubmit
加载事件:onload
前端基础之JavaScript_(5)_DOM对象总结的更多相关文章
- 前端基础之JavaScript_(3)_DOM对象
JavaScript之DOM对象 HTML DOM HTML Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM ...
- 前端基础之JavaScript_(2)_BOM对象
BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...
- 前端基础之JavaScript_(4)_js的作用域
js作用域 作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. js的作用域 1. 全局作用域(Glob ...
- 前端基础之JavaScript_(1)_ECMAScript
一.JavaScript概述 JavaScript的历史 992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase. ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
- 前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
- 前端基础之DOM和BOM
前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...
随机推荐
- linux清空文件夹命令问题
1.linux删除命令是rm.2.命令为rm -rf /文件夹/文件名.3.例如:rm -f /a/b/d.log.删除在a文件夹中的b文件夹中的d.log这个文件.rm -rf /a/b.删除a文件 ...
- “Missing artifact....."的解决办法
在使用Maven开发时,总会碰到一些问题,例如"Missing artifact org.apache.commons:commons-csv:jar:1.0-SNAPSHOT", ...
- LINUX内核升级-更新网卡驱动
因项目需要,将当前内核(2.6.32-220.el6.x86_64)升级到目标内核(2.6.33-110.el6.x86_64),但是编译的目标 内核(2.6.33-110.el6.x86_64)的对 ...
- 中移苏研DCOS实践之路完整篇
一.实践背景 1.1现网生产系统存在的问题 在中国移动内部各省市公司,由于技术迭代.设备更新的原因,设备繁杂,有x86server .VMware虚拟机.OpenStack虚拟机以及不同厂商的物理机( ...
- Encourage_by_WeChat
- jsp中的http status 500错误问题怎么解决
HTTP 500 - 内部服务器错误如果有其他错误提示,需根据其提示进行修改.如果没有其他错误提示,则可以重启tomcat服务器解决.HTTP错误代码介绍: HTTP 400 - 请求无效HTTP 4 ...
- JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上。
JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上. Java(由 Sun 发明)是更复杂的编程语言. ECMA-262 是 JavaScript 标准的官方名称. Jav ...
- 优先队列——二项队列(binominal queue)
[0]README 0.1) 本文文字描述部分转自 数据结构与算法分析, 旨在理解 优先队列——二项队列(binominal queue) 的基础知识: 0.2) 本文核心的剖析思路均为原创(inse ...
- WPF的本质:数据和行为
如果自己来做一个UI框架,我们会首先关注哪些方面?我想UI框架主要处理的一定包括两个主要层次的内容,一个是数据展现,另一个就是数据操作,所以UI框架必须能够接收各种不同的数据并通过UI界面展现出来,然 ...
- struts2之constant 讲解 (转)
struts.serve.static.browserCache 该属性设置浏览器是否缓存静态内容.当应用处于开发阶段时,我们希望每次请求都获得服务器的最新响应,则可设置该属性为false. stru ...