文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容

JS有两个内容

一个找到标签

操作标签

Dom
让页面动起来条件
1、找到标签
  整个html id 不能重复
获取单个元素 document.getElementById('i1')
获取多个元素(列表)document.getElementsByTagName('div') 以列表形式显示
获取多个元素(列表)document.getElementsByClassName('c1') CSS 以列表形式显示
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合

 
2、操作标签

    a. innerText

        获取标签中的文本内容
标签.innerText 对标签内部文本进行重新赋值 标签.innerText = ""
 

document.getElementById('il');
<div id=​"il">​我是il​</div>​

获取文本内容
document.getElementById('il').innerText;
"我是il"

重新赋值

document.getElementById('il').innerText = "新内容";
"新内容"




拿到三个标签 是个列表

document.getElementsByTagName('a');
[<a>​aaaa​</a>​, <a>​909​</a>​, <a>​kadfdasd​</a>​]


取值

document.getElementsByTagName('a')[1]
<a>​909​</a>​

把909 改成666

document.getElementsByTagName('a')[1].innerText = '666';
"666"

把列表循环 把里面元素都替换成666字符串

var tag = document.getElementsByTagName('a');

for(var i=0;i<tag.length;i++){
tag[i].innerText = '666';
}
"666"

												

前端 Dom 直接选择器的更多相关文章

  1. JavaScript实现DOM对象选择器

    目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...

  2. DOM的选择器

    这几天学习了DOM的选择器,现在来进行一下总结分类. 1.DOM里的元素节点选择器 元素节点选择器包括id,class,name,tagname,高级,关系. 1.1 id选择器 id:返回的是单个对 ...

  3. Dom直接选择器

    Dom直接选择器 <!DOCTYPE html> <!--Dom间接选择器--> <html lang="en"> <head> & ...

  4. Python之Web前端Dom, jQuery

    Python之Web前端: Dom   jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...

  5. DOM querySelector选择器

    原生的强大DOM选择器querySelector 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并 ...

  6. DOM 的选择器 API

    在刚开始的时候,我们只能用 getElementById,getElementsByClassName,getElementsByTagName 这几个 DOM 方法查找 DOM 树中的元素.后来,在 ...

  7. 前端--关于css选择器

    css选择器就好像表达式一样,返回一组或者一个html元素,后面的样式声明块应用到返回的元素上.所以可以把css选择器理解为某个或者某一类html元素的抽象的写法. 在讲具体的各种选择器之前要提一下选 ...

  8. 前端备忘录--JQuery选择器

    基本选择器 基本选择器是最常用的选择器,也是最简单的选择器. $("#test") //选取id为test的元素 $(".test") //选取class为te ...

  9. 前端——DOM

    什么是DOM? DOM是W3C(万维网联盟)的标准,是Document Object Model(文档对象模型)的缩写,它定义了访问HTML和XML文档的标准: “W3C文档对象模型(DOM)是中立于 ...

随机推荐

  1. STM32F10x_硬件I2C主从通信(轮询发送,中断接收)

    Ⅰ.写在前面 关注我分享文章的朋友应该知道我在前面讲述过(软件.硬件)I2C主机控制从机EEPROM的例子.在I2C通信主机控制程序是比较常见的一种,可以说在实际项目中,很多应用都会使用到I2C通信. ...

  2. Lua中的字符串函数库

    字符串库中的一些函数是非常简单的: string.len(s)          返回字符串s的长度:string.rep(s, n)      返回重复n次字符串s的串:你使用string.rep( ...

  3. Gogs http和ssh地址显示localhost的问题

    问题描述: 如下图所示HTTP和SSH地址显示的是localhost而不是对应的域名或地址. 解决方案: 按以下方法修改Gogs配置文件并重启服务器 域名问题 RUN_USER = git DOMAI ...

  4. libcurl库的编译

    终于弄懂了libcurl库的编译,记下来免得忘记. 下载地址:   libcurl库:http://curl.haxx.se/latest.cgi?curl=zip   openssl安装包:http ...

  5. 【转】【iOS测试系列】常用测试小插件的使用

    背景介绍 由于iOS系统的限制,在非越狱的自动化测试中无法实现一些常用的功能,比如不同应用之间来回切换.模拟全局的点击事件等等.但是在越狱的环境下,这些限制就不存在了,我们可以利用各种小插件来实现我们 ...

  6. MapReduce总体架构分析

    转自:http://blog.csdn.net/Androidlushangderen/article/details/41051027 继前段时间分析Redis源码一段时间之后,我即将开始接下来的一 ...

  7. java内存溢出怎么解决

    java.lang.OutOfMemoryError这个错误我相信大部分开发人员都有遇到过,产生该错误的原因大都出于以下原因:JVM内存过小.程序不严密,产生了过多的垃圾. 导致OutOfMemory ...

  8. annexb模式

    h264有两种封装,一种是annexb模式,传统模式,有startcode,SPS和PPS是在ES中一种是mp4模式,一般mp4 mkv会有,没有startcode,SPS和PPS以及其它信息被封装在 ...

  9. jquery ajax生成Select

    function DropDownList(url, domId, defaultValue) {    /// <summary>    /// ajax生成select    /// ...

  10. MathType中输入不了汉字如何处理

    MathType作为一款常见的数学公式编辑器在编辑数学公式时,不仅可以输入英文字符,对中文也有很好的兼容性.但是有些用户在使用MathType编辑公式时,发现一些汉字是输入不进去的,这个时候我们就需要 ...