一、简介

　　文档对象模型（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. string类型的常用方法

    1. 在尾部插入/删除元素 string s("hello"); // 插入/删除一个字符 s.push_back('!'); s.pop_back(); // 插入多个字符 s. ...

  2. Scrum Meeting 10.24

    成员 已完成任务 下一阶段任务 用时 徐越 阅读后端代码,了解服务器的概念,以及服务器和终端间的通信机制 学习服务器配置 4h 赵庶宏 阅读后端代码,了解服务器的概念,以及服务器和终端间的通信机制 阅 ...

  3. iOS 开发学习－import和include的区别

    //当我们在代码中使用两次#include的时候会报错:因为#include相当于拷贝头文件中的声明内容,所以会报重复定义的错误 //但是使用两次#import的话,不会报错,所以他可以解决重复导入的 ...

  4. Think In Java读书笔记：内部类覆盖及其初始化

    本文相关章节:第十章 内部类 10.10 内部类可以被覆盖吗 在读至本节第二个范例代码时(及下方的代码),我对输出结果中的第一个“Egg.Yolk()”很不理解,为什么它会第一个地方输出. 我起初认为 ...

  5. Week4-作业1：阅读与博客

    第四章.两人合作 1.原文: 在变量面前加上有意义的前缀,程序员就能一眼看出变量的类型及相应的语义.这就是“匈牙利命名法”的用处.还有一些地方不适合用“匈牙利命名法”,比如,在一些强类型的语言(如C# ...

  6. 安恒杯2月月赛-应该不是xss

    1. 打开题目一看,是个留言板 2. 查看源码发现有几个js文件 依次打开发现在main.js里存在这样一段代码 3. 访问 /#login是登录的界面,/#chgpass是修改密码的界面,其中修改密 ...

  7. getResource()的使用总结 ；

    1.通过ClassLoader来加载getResource()时不需要加 "/" 因为source是从main开始的; Thread.currentThread().getCont ...

  8. 关于JEE web项目 Servlet中 “/” 的解释 ；

    1.关于"/" 可以代表web应用的根目录,也可以代表站点的根目录: 1>如果交给浏览器解析,则代表web站点的根目录,如果交给web服务器解析则代表项目的根目录: 2> ...

  9. [转帖]Docker五种存储驱动原理及应用场景和性能测试对比

    Docker五种存储驱动原理及应用场景和性能测试对比 来源:http://dockone.io/article/1513 作者: 陈爱珍 布道师@七牛云   Docker最开始采用AUFS作为文件系统 ...

  10. 在MFC中显示图片（opencv Mat类型）

    1,在MFC窗体中添加picture control控件,并添加对应的变量名 2,在窗体的初始化窗口中添加: namedWindow(); HWND hWnd = (HWND)cvGetWindowH ...