一、简介

　　文档对象模型（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. Django之Form

    目录 一.说明 二.参数说明 三.自定义验证规则 四.实例 一.说明 Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数 ...

  2. C++ 函数 参数传递方式

    用函数调用所给出的实参(实际参数,actual arguments)向函数定义给出的形参(形式参数,formal arguments)设置初始值的过程,叫做参数传递(Argument Passing) ...

  3. LeetCode 174. Dungeon Game (C++)

    题目: The demons had captured the princess (P) and imprisoned her in the bottom-right corner of a dung ...

  4. 20135234mqy-——信息安全系统设计基础第六周学习总结

    处理器体系结构 4.1 Y86指令集体系结构 4.1.1程序员可见状态 Y86程序中的每条指令都会读取或修改处理器状态的某些部分,称为程序员可见状态. 4.1.2 Y86指令 4个指令:irmovl, ...

  5. python接口测试之requests库（一）

    一.requests库的安装 requests库作为第三方库,需要安装 cmd模式下,运行pip install requests 二.在学习如何发送请求之前,我们先来了解一下requests库,查看 ...

  6. Leetcode题库——13.罗马数字转整数

    @author: ZZQ @software: PyCharm @file: Luoma2Int.py @time: 2018/9/16 17:06 要求: 罗马数字转数字 字符 数值 I 1 V 5 ...

  7. 四则运算之GUI

    四则运算之GUI Coding克隆地址:https://git.coding.net/lvgx/pair_programming.git   目录: 一.前言 二.计划时间——PSP 三.接口设计 四 ...

  8. Java大数——快速矩阵幂

    Java大数——快速矩阵幂 今天做了一道水题,尽管是水题,但是也没做出来.最后问了一下ChenJ大佬,才慢慢的改对,生无可恋了.... 题目描述: 给a,b,c三个数字,求a的b次幂对c取余. 数据范 ...

  9. keil51下使用sprintf问题

    测试环境:keil c51 + STC89C52说明: 1.keil的不定参数只有15个字节也就是说sizeof(...) 加起来总共不能超过15字节,否则会出错 2.当不定参数中有常数时,你也会得不 ...

  10. C语言中的strstr函数

    转自:http://www.cnblogs.com/xy-kidult/archive/2012/12/25/2832460.html 早上翻<C和指针>,碰见一个子串查找问题,这个问题在 ...