DOM获取元素的方法
DOM:document object module 文档对象模型
DOM就是描述整个html页面中节点关系的图谱,如下图。
1,通过ID,获取页面中元素的方法;(上下文必须是document)
document.getElementById('元素的ID');
2,通过name属性获取一组元素;(上下文必须是document)
<body>
<input name = 'cniao' type='radio' value='菜'>
<input name = 'cniao' type='radio' value='菜菜'>
<script>
var x = document.getElementByName('cniao');
console.log(x);
</script>
</body>
3,在整个文档中,通过元素的标签名获取一组元素;(上下文可以是document,也可以是一个元素)
document.getElementsByTagName('元素标签名')
<body>
<div>
<p> 这是第一个P标签</p>
<p> 这是第二个P标签</p>
<p> 这是第三个P标签</p>
</div>
<script>
document.getElementByTagName('p')[].innerHTML = '你好,P标签';
//当中括号里面的1改为[*]时,获取的是文档中的所有元素。
</script>
</body>
4,通过类名获取元素,用法与getElementsByTagName类似;(上下文可以是document,也可以是一个元素)
getElementsByClassName;
5,以一个元素对象返回一个文档的文档元素;(只能是html这个标签)
document.documentElement;
6,获取body标签的方法;(是能是body标签)
document.body
7,匹配指定选择器的第一个元素;(上下文可以是document,也可以是一个元素)
querySelector()
8,通过选择器获取一组元素;(上下文可以是document,也可以是一个元素)
querySelectorAll
For循环
for (1开始执行的代码块,2定义循环条件,3循环被执行之后执行){
被执行的代码块
};
for (var i = ; i<; i++){
console.log( i );
};
循环里的关键字
break 跳出循环; continue 跳过本次循环;
function cniao(){
var x = '', i = ;
for (=;i<;i++){
if (i==){
break; //循环到3时,就会结束;后面的数字不会循环出来;
};
x = x + '该数字' + i + '<br>'
};
};
function cniao(){
var x = '', i = ;
for (=;i<;i++){
if (i==){
continue; //跳过 i = 3这次循环,后面的数字会继续循环出来;
};
x = x + '该数字' + i + '<br>'
};
};
While循环
while循环会在指定条件为真时循环执行代码块;
while (条件){
需要执行的代码
};
while ( i< ){
x = x + "The number is " + i + "<br>";
i ++;
}
do/while 循环
循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真,就会重复这个循环;
do{
需要执行的代码;
}
while (条件)
do{
x = x + "This number is " + i + "<br>";
i ++;
}
while ( i< );
getAttribute()方法,获取链接的target属性值;
<body>
<a href = '' target = 'black'>对象属性</a>
<p id = "demo">点击显示目标属性</p>
<button onclick="cniao">点我</button>
<script>
function cniao(){
var a = document.getElementsByTagName('a')[];
document.getElementById("demo").innerHTML = a.getAttribute('taget');
}
</script>
</body>
setAttribute()方法设置元素的属性类型;
<body>
<input value = "ok">
<button onclick = 'cniao'>点我</buttom>
<script>
function cniao(){
document.getElementsByTagName('input')[].setAttribute('type','button');
};
</script>
</body>
removeAttribute()方法删除指定的属性;
<body>
<h1 style = 'color:red'>Hello World</h1>
<button onclick = 'cniao'>点我</button>
<script>
function cniao(){
document.getElementsByTagName('h1')[].removeAttribute('style');
};
</script>
</body>
DOM获取元素的方法的更多相关文章
- [DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取
目录 [DOM]获取元素:根据ID.标签名.HTML5新增的方法.特殊元素获取 1.根据 ID 获取[.getElementById( )] 2.根据标签名获取[.getElementsByTagNa ...
- JavaScript通过元素id和name直接获取元素的方法
概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...
- 关于dom获取元素的几种方式
原文链接:https://blog.csdn.net/levinhax/article/details/71274456 获取元素DOM对象有很多种方法,以前一直在用getElementById和ge ...
- DOM获取元素、修改元素
## DOM获取元素.修改元素### 1.DOM#### ①什么是DOM?作用? > DOM是文档对象模型 > 作用:操作网页内容,可以开发网页内容特效和实现用户交互.#### ②DOM对 ...
- JQuery获取元素的方法总结
JQuery获取元素的方法总结 一.说明 获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本身 1.只需要一种jQuery选择器 选择器 实 ...
- 【鬼脸原创】JQuery获取元素的方法总结
目录 一.说明 二.获取本身 三.获取同级元素 四.获取父级元素 五.获取子级元素 一.说明 获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本 ...
- selenium获取元素信息方法(转载)
1.获取当前页面的Url函数 方法:current_url 实例: driver.current_url 2.获取元素坐标 方法:location 解释:首先查找到你要获取元素的,然后调用locati ...
- mui选择器和dom获取元素的区别(记得把mui对象转为dom对象才能调用用dom方法)
<!DOCTYPE html><html> <head><meta charset="UTF-8"><meta name=&q ...
- 跟随标准与Webkit源码探究DOM -- 获取元素之querySelector,querySelectorAll
使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentF ...
随机推荐
- 使用Chrome远程调试GenyMotion上的WebView程序
WebView让我们方便的使用熟悉的Html/JS/Css来开发APP.但是,当出现问题时,却没有PC上那么方便的排查问题.PC上,前端的问题我们可以使用Chrome的开发者工具方便的调试.Andro ...
- POJ 3080 Blue Jeans(Java暴力)
Blue Jeans [题目链接]Blue Jeans [题目类型]Java暴力 &题意: 就是求k个长度为60的字符串的最长连续公共子串,2<=k<=10 规定: 1. 最长公共 ...
- CentOS 7 使用SVN+Apache搭建版本控制服务器
svn简介 Subversion是一个免费/开源的版本控制系统, Subversion 可以跨越时间地对文件和目录, 以及它们的修改进行管理. 这就允许你恢复 数据的旧版本, 或检查数据的修改历史. ...
- CentOS 7 DR模式LVS搭建
调度器LB : 192.168.94.11 真实web服务器1 : 192.168.94.22 真实web服务器2 : 192.168.94.33 VIP : 192.168.94.111 脚本如下 ...
- 利用js和JQuery定义一个导航条菜单
利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...
- jmeter如何玩之badboy + jmeter并发性能测试
今天下班时公司安排了一个同事来对项目做集群性能测试,怀着对性能测试的好奇心,下班后没有着急离开,而是等待 那位同事的到来,然后在旁边学习了下如何使用Badboy和jmeter做性能测试. 1. 软件介 ...
- GoldenGate使用SQLEXEC和GETVAL实现码表关联
使用OGG中的SQLEXEC参数,可以执行SQL语句或存储过程,再加上@GETVAL函数,可以在目标端获取源表没有的字段值.比如,源端有一个事实表和一个代码表COUNTRY_CODES,代码表中有两个 ...
- 1.1:Get Started with Unity Shaders
文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 第1章开始正式进入Unity Shader的学习. 什么是Shader 本 ...
- poj2142 The Balance
poj2142 The Balance exgcd 应分为2种情况分类讨论 显然我们可以列出方程 ax-by=±d 当方程右侧为-d时,可得 by-ax=d 于是我们就得到了2个方程: ax-by=d ...
- Python3 pip命令报错:Fatal error in launcher: Unable to create process using '"'
Python3 pip命令报错:Fatal error in launcher: Unable to create process using '"' 一.问题 环境:win7 同时安装py ...