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 learning2.py
L = ['Michael', 'Sarah', 'Tracy', 'Bob', 'Jack'] # 取前3个元素的笨方法 r = [] n = 3 for i in range(n): r.appe ...
- 16_常用API_第16天（正则表达式、Date、DateFormat、Calendar）_讲义
今日内容介绍 1.正则表达式的定义及使用 2.Date类的用法 3.Calendar类的用法 ==========================================第一阶段======= ...
- 07_Java基础语法_第7天（练习）_讲义
今日内容介绍 1.循环练习 2.数组方法练习 01奇数求和练习 * A: 奇数求和练习 * a: 题目分析 * 为了记录累加和的值,我们需要定义一个存储累加和的变量 * 我们要获取到1-100范围内的 ...
- RabbitMQ使用笔记
一.安装 1.下载所需安装包 下载服务端(原因在于RabbitMQ服务端代码是使用并发式语言erlang编写的):http://www.rabbitmq.com/install-windows.htm ...
- Nginx服务器搭建
http://blog.csdn.net/molingduzun123/article/details/51850925 http://tengine.taobao.org/book/index.ht ...
- 调整Linux的最大文件打开数
要调整一下Linux的最大文件打开数,否则squid在高负载时执行性能将会很低.另外,在Linux下面部署应用时,有时候会遇上 Socket/File:Can’t open so many files ...
- js中的extend，可实现浅拷贝深拷贝
js中的extend 1. JS中substring与substr的区别 之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为 ...
- Git命令提交项目代码
Git客户端安装 今天就结合`GitHub`,通过`Git`命令,来了解如何实现开源代码库以及版本控制 GitHub是一个面向开源及私有软件项目的托管平台,因为只支持Git 作为唯一的版本库格式进行托 ...
- mysql DDL、DML、DCL、DQL区分
mysql [Structure Query Language] 的组成分4个部分: DDL [Data Mefinition Language] 数据定义语言 DML [Data ...
- mybatis的mapper参数传递
简单参数传递 简单参数传递是指: 传递单个基本类型参数,数字类型.String 传递多个基本类型参数 parameterType 属性可以省略: 传递单个基本类型参数 SQL语句中参数的引用名称并不 ...