一、简介

  文档对象模型(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 操作 attribute 和 property 的区别

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

  6. JavaScript DOM 编程艺术&#183;setInterval与setTimeout的动画实现解析

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

  7. javascript DOM 操作

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

  8. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  9. JavaScript : DOM文档解析详解

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

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

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

随机推荐

  1. MySQL binlog的格式解析

    我搜集到了一些资料,对理解代码比较有帮助. 在头文件中binlog_event.h中,有描述 class Log_event_header class Log_event_footer 参见[Myst ...

  2. 在Ubuntu-14.04.3配置并成功编译Android6_r1源码

    折腾了一周,终于把Android6_r1的源码编译成功.先上图,这是在ubuntu中运行的Android模拟器: 由于我是在win8中安装虚拟机VMware,然后在虚拟机中安装Ubuntu进行编译,所 ...

  3. JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  4. vue+axios 前端实现登录拦截(路由拦截、http拦截)

    一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...

  5. VC6中函数点go to definition报告the symbol XXX is undefined

    删除Debug中的bsc文件,再重建所有文件即可,在该函数处点击go to definition会提示重建.bsc文件,如果不行,多操作几次.

  6. ES6 Rest参数

    Rest参数接收函数的多余参数,组成一个数组,放在形参的最后,形式如下: function func(a, b, ...theArgs) { // ... } rest参数只包括那些没有给出名称的参数 ...

  7. 关于ES6的一些新特性的学习

    一.关于变量 ES5 1.只有全局作用域变量和函数作用域变量 2.“变量提升”(当程序进入一个新的函数时,会将该函数中所有的变量的声明放在函数开始的位置.仅仅会提升变量的声明,不会提升变量的赋值) E ...

  8. Pandas的使用(2)

    Pandas的使用(2) 1.新建一个空的DataFrame数据类型 total_price = pd.DataFrame() #新建一个空的DataFrame 2.向空的DataFrame中逐行添加 ...

  9. UGUI之控件以及按钮的监听事件系统

    using UnityEngine; using System.Collections; using UnityEngine.EventSystems; public class EventTrigg ...

  10. 深入理解JAVA虚拟机阅读笔记1——JAVA内存区域

    一.Java内存区域 1.程序计数器 线程私有. 当前线程所执行的字节码的行号指示器.由于JAVA是多线程的,因此每个线程都独立的程序计数器. 异常:没有规定任何OutOfMemeryError情况的 ...