一、简介

　　文档对象模型（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. iOS静默推送（Silent Remote Notifications）

    此功能是iOS7新增加的功能,允许应用收到通知后在后台(background)状态下运行一段代码,可用于从服务器获取内容更新. 普通推送:收到推送后(有文字有声音),点开通知,进入APP后,才执行-- ...

  2. 第十二周PSP

  3. Scrum Meeting 11.05

    成员 今日任务 明日计划 用时 徐越 代码移植 学习ListView+simpleAdapter,actionBar.阅读并修改前端代码 4h 赵庶宏 服务器配置,代码移植  构建后端数据库,进行完善 ...

  4. spring冲刺第七天

    昨天进行地图和人物的代码整合,有所缺陷. 今天使人物成功的在地图上运动,并设计炸弹爆炸效果. 遇到的问题:炸弹不会吧人物炸死,只会炸没砖块.

  5. WebGL学习笔记四点二

    前几章对图形图形内部多是 以纯色填充,但是现实中已经有许多好的图片了我们没必要一点点画,这一章第五章就是将图片以纹理的形式加载到片元中,主要过程如下,首先是定义点的坐标的attribute变量用于在j ...

  6. 学习pl/sql之一

    --使用pl/sql语句打印一个hello world begin   dbms_output.put_line('hello,world'); end;      但是在sqlplus里面就不一样了 ...

  7. b5

    吴晓晖(组长) 过去两天完成了哪些任务 完善推荐算法 展示GitHub当日代码/文档签入记录 接下来的计划 推荐算法 还剩下哪些任务 组员:刘帅珍 过去两天完成了哪些任务: 修改原型,整理背景 明日计 ...

  8. linux下使用pip在虚拟环境下安装tensorflow-gpu

    1. 查看已安装包库 pip list 2. linux下下载虚拟环境 sudo apt-get install python-virtualenv 3.建立全新的virtualenv环境 virtu ...

  9. BETA-2

    前言 我们居然又冲刺了·二 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 过去两天完成了哪些任务 了解OpenCV下的视频参数及其调用方法 初步编码 接下来的计划 文档工作 速 ...

  10. Week4-作业1

    第四章        这一章主要讲了代码规范.复审和团队合作这两项内容.        在关于代码设计规范方面,书中讲到了关于goto的使用:        “函数最好有单一的出口,为了达到这一目的, ...