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”> ...
随机推荐
- Vim YouCompleteMe 安装配置
YouCompleteMe是很强大的vim插件,可以提供强大的补齐功能,曾经多次尝试安装,都没有配置成功,最近在一个契机下,看到有同事的配置,自己在边尝试和边咨询后,终于也搞定了,遂记录下. 官网有最 ...
- Linux 学习记录 20170218
一.Linux 硬件查看命令 ----/proc 文件系统是一种内核和内核模块用来向进程(process) 发送信息的机制.我们可以从这个文件里获取到系统的相关信息. 1.显卡信息dmesg ...
- Java第一次试验
北京电子科技学院(BESTI) 实 验 报 告 课程:Java程序设计 班级:1352 姓名:朱国庆 学号:20135237 成绩: ...
- 关于char存储值表示
char里面-128的二进制表示为1000 0000,0的二进制表示为0000 0000 -127的二进制表示为1000 0001, 127的二进制表示为0111 1111. 从-127到-1和1到1 ...
- Internet History, Technology and Security (Week 2)
Week 2 History: The First Internet - NSFNet Welcome to week 2! This week, we'll be covering the hist ...
- HDU 1027 打印沙漏
https://pintia.cn/problem-sets/994805260223102976/problems/994805294251491328 本题要求你写个程序把给定的符号打印成沙漏的形 ...
- js+Canvas 利用js 实现浏览器保存图片到本地
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [转帖]Beyond Compare如何进行二进制比较
Beyond Compare如何进行二进制比较 http://www.beyondcompare.cc/jiqiao/erjinzhi-bijiao.html 在使用Beyond Compare软件比 ...
- 在服务器搭建Jupyter notebook
安装 Jupyter Notebook (这里虽然是对centos和Python2的,但是在Ubuntu16.04,Python3同样可以照着弄) Jupyter Notebook 简介 Jupyte ...
- linux c 判断文件存在,遍历文件,随机修改文件内容
#include<stdio.h> #include<stdlib.h> #include<time.h> #include<assert.h> #in ...