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”> ...
随机推荐
- scrapy有用的（代理，user-agent，随机延迟等）
代理 方法一(待测试) 见scrapy.downloadermiddlewares.httpproxy.HttpProxyMiddleware import os # 设置相应的代理用户名密码,主机和 ...
- ffmpeg——压缩mav格式音频
今天偶然帮朋友压缩一个mav格式的音频.开始用压缩码率的方式,mav格式的音频体积一点都没变,查资料需要压缩音频文件的采样率和声道才能压缩mav格式的音频. 压缩要求是:将一个mav格式的音频文件,由 ...
- 获取session
HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()) ...
- 20162328蔡文琛 大二week07
20162328 2017-2018-1 <程序设计与数据结构>第7周学习总结 教材学习内容总结 树是非线性结构,其元素组织为一个层次结构. 树的度表示树种任意节点的最大子节点数. 有m个 ...
- C++：类中的赋值函数
先来看一个例子: #include<iostream> #include<string> using namespace std; class Student{ public: ...
- 第二阶段每日站立会议Second Day
昨天我在手机端安装cpp后进行界面效果测试以及进一步完善 今天对图片显示的大小进行调整 遇到的问题:当图片太小时,显示一块灰色区域,不美观
- 【区间DP】codevs3657 括号序列题解
题目描述 Description 我们用以下规则定义一个合法的括号序列: (1)空序列是合法的 (2)假如S是一个合法的序列,则 (S) 和[S]都是合法的 (3)假如A 和 B 都是合法的,那么AB ...
- 四则运算截图and代码
1.运行截图 2.代码 #include<stdio.h> #include<stdlib.h> int main() { int i=300; int a=0; while( ...
- 项目报错“JavaServer Faces 2.2 can not be installed : One or more constraints”等一系列问题
在做springmvc+maven项目时,经常遇到如下错误: 解决办法(这里以jdk1.8,web3.0为例): 一:保证build path的jre版本 remove掉旧版本的,add新版本 二:保 ...
- PAT 1067 试密码
https://pintia.cn/problem-sets/994805260223102976/problems/994805266007048192 当你试图登录某个系统却忘了密码时,系统一般只 ...