一、简介

  文档对象模型(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直接选择器的更多相关文章

  1. JavaScript实现DOM对象选择器

    目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...

  2. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  4. Dom直接选择器

    Dom直接选择器 <!DOCTYPE html> <!--Dom间接选择器--> <html lang="en"> <head> & ...

  5. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  6. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  7. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  8. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  9. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  10. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

随机推荐

  1. Vim YouCompleteMe 安装配置

    YouCompleteMe是很强大的vim插件,可以提供强大的补齐功能,曾经多次尝试安装,都没有配置成功,最近在一个契机下,看到有同事的配置,自己在边尝试和边咨询后,终于也搞定了,遂记录下. 官网有最 ...

  2. Linux 学习记录 20170218

    一.Linux 硬件查看命令     ----/proc 文件系统是一种内核和内核模块用来向进程(process) 发送信息的机制.我们可以从这个文件里获取到系统的相关信息. 1.显卡信息dmesg ...

  3. Java第一次试验

    北京电子科技学院(BESTI) 实     验    报     告 课程:Java程序设计   班级:1352       姓名:朱国庆   学号:20135237 成绩:             ...

  4. 关于char存储值表示

    char里面-128的二进制表示为1000 0000,0的二进制表示为0000 0000 -127的二进制表示为1000 0001, 127的二进制表示为0111 1111. 从-127到-1和1到1 ...

  5. 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 ...

  6. HDU 1027 打印沙漏

    https://pintia.cn/problem-sets/994805260223102976/problems/994805294251491328 本题要求你写个程序把给定的符号打印成沙漏的形 ...

  7. js+Canvas 利用js 实现浏览器保存图片到本地

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. [转帖]Beyond Compare如何进行二进制比较

    Beyond Compare如何进行二进制比较 http://www.beyondcompare.cc/jiqiao/erjinzhi-bijiao.html 在使用Beyond Compare软件比 ...

  9. 在服务器搭建Jupyter notebook

    安装 Jupyter Notebook (这里虽然是对centos和Python2的,但是在Ubuntu16.04,Python3同样可以照着弄) Jupyter Notebook 简介 Jupyte ...

  10. linux c 判断文件存在,遍历文件,随机修改文件内容

    #include<stdio.h> #include<stdlib.h> #include<time.h> #include<assert.h> #in ...