前端 Dom 直接选择器
文档对象模型(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 直接选择器的更多相关文章
- JavaScript实现DOM对象选择器
目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...
- DOM的选择器
这几天学习了DOM的选择器,现在来进行一下总结分类. 1.DOM里的元素节点选择器 元素节点选择器包括id,class,name,tagname,高级,关系. 1.1 id选择器 id:返回的是单个对 ...
- Dom直接选择器
Dom直接选择器 <!DOCTYPE html> <!--Dom间接选择器--> <html lang="en"> <head> & ...
- Python之Web前端Dom, jQuery
Python之Web前端: Dom jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
- DOM querySelector选择器
原生的强大DOM选择器querySelector 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并 ...
- DOM 的选择器 API
在刚开始的时候,我们只能用 getElementById,getElementsByClassName,getElementsByTagName 这几个 DOM 方法查找 DOM 树中的元素.后来,在 ...
- 前端--关于css选择器
css选择器就好像表达式一样,返回一组或者一个html元素,后面的样式声明块应用到返回的元素上.所以可以把css选择器理解为某个或者某一类html元素的抽象的写法. 在讲具体的各种选择器之前要提一下选 ...
- 前端备忘录--JQuery选择器
基本选择器 基本选择器是最常用的选择器,也是最简单的选择器. $("#test") //选取id为test的元素 $(".test") //选取class为te ...
- 前端——DOM
什么是DOM? DOM是W3C(万维网联盟)的标准,是Document Object Model(文档对象模型)的缩写,它定义了访问HTML和XML文档的标准: “W3C文档对象模型(DOM)是中立于 ...
随机推荐
- PHP——0128练习相关1——window.open()
Window.open()方法参数详解 1, 最基本的弹出窗口代码 window.open('page.html'); 2, 经过设置后的弹出窗口 window.open('page.html ...
- ThinkPHP整合cropper剪裁图片上传功能
1.先下载核心文件:https://github.com/fengyuanchen/cropper 2. 3.对于index.html文件 4.对于main.js文件 5.对于crop.php文件 & ...
- PHP时间戳 strtotime()使用方法和技巧
在php中我想要获取时间戳有多种方法,最常用的就是使用time函数与strtotime()函数把日期转换成时间戳了, 下面我来给大家分享一下时间戳函数 strtotime用法. 获取指定的年月日转化为 ...
- hdu 1115:Lifting the Stone(计算几何,求多边形重心。 过年好!)
Lifting the Stone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- RabbitMQ之Queues-5
工作队列的主要任务是:避免立刻执行资源密集型任务,然后必须等待其完成.相反地,我们进行任务调度:我们把任务封装为消息发送给队列.工作进行在后台运行并不断的从队列中取出任务然后执行.当你运行了多个工作进 ...
- 理解Loadrunner中的Browser Emulation Simulate
案例 测试环境描述: 客户端 5台 Windows2000机器.服务器端 20台机器 一台F5(负载均衡设备,提供一个唯一的IP供客户端访问) 客户端绑定Host后,使用域名http://www.* ...
- Unity3D 物体移动方式总结(转)
1. 简介 在unity3d中,有多种方式可以改变物体的坐标,实现移动的目的,其本质是每帧修改物体的position. 2. 通过Transform组件移动物体 Transform 组件用于描述物体在 ...
- 怎么用MathType解决Word公式排版很乱的问题
现在办公室起草文件,期刊论文投稿.学校试着编辑都要先在Word中编辑好后再打印出来.在Word中编辑这些文本内容时,如果遇到公式就要使用专门的MathType公式编辑器.而有很多人在用MathType ...
- 数据库存入数据后id保持不变,或者直接报错
数据库存入数据后id保持不变,且添加的数据一直在进行覆盖 或者直接报错 数据库存入数据后id保持不变,且添加的数据一直在进行覆盖 原因是: 之前注释掉了loadimage();在该函数中含有建立新的记 ...
- VC++ LoadLibrary失败,错误127(找不到指定的程序)
该原因一般是由于DLL或其依赖的DLL使用了高版本的API,而运行时找不到dll中的函数导致的错误. 使用依赖工具查看可能是这样的情况:第一个依赖dll文件小方块中有红色 正常情况下,应该是这样: 解 ...
拿到三个标签 是个列表