一、简介

　　文档对象模型（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. 20172321 20172333 2017-2018 暑假作业APP

    20172321 20172333 2017-2018 暑假作业APP 项目介绍 项目成员 吴恒佚 20172321 严域俊 20172333 项目简介 从理论上来说,这是一个贪吃蛇游戏. <贪 ...

  2. Chapter 2 软件过程

    软件发展前期,人们只重视结果而忽略了过程,随着技术的成熟,软件过程的重要性被日益发觉.软件过程是软件工程人员为了获得软件产品而在软件工具的支持下实施的一系列软件工程活动. 软件过程的基本活动包括问题提 ...

  3. 作业1.3——Android平台的开发环境的发展演变

    一开始的打算是在eclipse的基础上搭建Android平台,在ADT.SDK上兜兜转转,听过一些前车之鉴后,还是选择了Android studio.因为之前安装过eclipse,就省去了JDK下载和 ...

  4. 第一次spring冲刺第9天

    明天是这个阶段的最后一天了,今天讨论关于容错的方面,例如输入空白或其他字符等方面会出现的问题 ,部分代码如下: public void checkout(int trueResult) { Strin ...

  5. HBase 架构与工作原理3 - HBase 读写与删除原理

    本文系转载,如有侵权,请联系我:likui0913@gmail.com 一.前言 在 HBase 中,Region 是有效性和分布的基本单位,这通常也是我们在维护时能直接操作的最小单位.比如当一个集群 ...

  6. [PPT] PPT 录制视频功能.

    1. 需要PPT 里面增加进截图, 发现还不如 直接插入视频合理 本来想了一种方式是 使用 screen to gif 的工具 生成gif 来处理. 后来 发现ppt 里面自带一个 屏幕录制功能. 2 ...

  7. ES6 常用1

    ( (1)交换变量的值 ) [x, y] = [y, x]; ( (2)从函数返回多个值 // 返回一个数组function example() { return [1, 2, 3]; } var [ ...

  8. VIM 命令收藏

    1.vim#在命令行中输入vim,进入vim编辑器2.i#按一下i键,下端显示 --INSERT--#插入命令,在vim中可能任意字符都有作用3.Esc#退出i(插入)命令进行其它命令使用4.:r f ...

  9. Memcache介绍与应用场景

    一:概念介绍         Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果 ...

  10. sql中的duplicate的使用

    应用场景:有时候在做一些系统设置功能的时候,系统在第一次使用,或者初始化的时候,该设置信息并没有存在于数据库中,或者该系统设置信息永远只保存一条,没有必要为增加和修改这条信息而分别编写insert和u ...