JavaScript--Dom直接选择器
一、简介
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
二、Dom直接选择器
2.1 查找标签
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
2.2 事例
<body>
<div id="i1">冰镇西瓜汁</div>
<a>aaa</a>
<a>bbb</a>
<a>ccc</a>
</body>
（1）根据ID获取标签
tag = document.getElementById('i1')
<div id="i1">冰镇西瓜汁</div>
（2）根据标签名称获取标签（或集合）
document.getElementsByTagName('a')
HTMLCollection(3) [a, a, a]
document.getElementsByTagName('a')[0]
<a>aaa</a>
（3）使用innerText获取标签内容
var tag = document.getElementById('i1')
undefined
tag.innerText
"冰镇西瓜汁"
（4）标签对象.innerText="新值"
替换原来标签的文本内容
var tag = document.getElementById('i1')
undefined
tag.innerText = "盖被吹空调"
"盖被吹空调"
（5）循环获取标签集合中的内容
var tags = document.getElementsByTagName('a')
undefined
for(var i in tags){
console.log(tags[i].innerText);}
aaa
bbb
ccc
JavaScript--Dom直接选择器的更多相关文章
- JavaScript实现DOM对象选择器
目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
- Dom直接选择器
Dom直接选择器 <!DOCTYPE html> <!--Dom间接选择器--> <html lang="en"> <head> & ...
- JavaScript DOM 基础操作
JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
- javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
- JavaScript : DOM文档解析详解
JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...
随机推荐
- Python List Comprehension
(一)使用List Comprehension的好处 在了解Python的List Comprehension之前,我们习惯使用for循环创建列表,比如下面的例子: numbers = range(1 ...
- TeamWork#3,Week5,The First Meeting of Our Team
sixsix第一次会议记录 [会议时间]2014年10月23日星期四19:00-20:00 [会议形式]小组讨论 [会议地点]5号公寓 [会议主持]高雅智 [会议记录]张志浩 会议整体流程 一.签到 ...
- OO终章--总结博客
一.测试与正确性论证的比较 从方法上看,测试是使用大量测试样例来覆盖测试代码,从而能够检测代码的实现是否正确,功能是否完善.而正确性论证是使用代码的规格和逻辑进行严密的推论和证明,从而验证代码的实现正 ...
- 在Windows下制作静态库和动态库
一:静态库的创建 VC++6.0中new一个的为win32 static library工程,之后有二个选项.根据需求选吧. 具体的类或者函数的添加过程和标准的工程一样,直接创建新的类或者添加新 的. ...
- Spring笔记①--helloworld
Spring Spring是一个轻量级控制反转(IoC)和面向切面(AOP)的容器框架,它主要是为了解决企业应用开发的复杂性而诞生的: 目的:解决企业应用开发的复杂性 功能:使用基本的Javabean ...
- Java script 的dom编程
实例1: </head> <body> <div id="div1"> <p id="p1">这是一个段落< ...
- 凡事预则立|项目Beta冲刺准备
1.讨论组长是否重选的议题和结论. 组员一致认为组长不需要重选,我们都很认可组长的表现,组长的付出我们都看在眼里,我们找不出更适合担任组长的人选. 2.下一阶段需要改进完善的功能. 财富值的布局优化以 ...
- Java中实现PCA降维
package com.excellence.splitsentence; import java.net.UnknownHostException; import java.util.ArrayLi ...
- Enterprise Library 1.1 参考源码索引
http://www.projky.com/entlib/1.1/Microsoft/Practices/EnterpriseLibrary/Caching/BackgroundScheduler.c ...
- SOA （面向服务的架构）-Service Oriented Architecture
SOA (面向服务的架构) 编辑 面向服务的架构(SOA)是一个组件模型,它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来.接口是采用中立的方式进行定义的,它应该独立 ...