<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>获取dom对象</title>
<style>
#btn3{
border:1px solid red;
}
#btn33{
border:1px solid blue;
}
</style>
</head>
<body>
<input id="btn1" type="button" value="mybtn1" />
<input id="btn2" type="button" value="mybtn2" />
<input id="btn2" type="button" value="mybtn22" />
<input id="btn3" type="button" value="mybtn3" />
<input id="btn3" type="button" value="mybtn33" />
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
在js里面能获取dom对象的方法,常用的有三种,
分别是:
document.getElementById(id);
document.getElementsByName(name);
document.getElementsByTagName(tag);
*/
/*
getElementById(id);
获取文档中第一个匹配id属性的dom对象.
*/
var btn1 = document.getElementById("btn1");
//btn1就是获取到页面id=btn1的dom对象
//输出对象的value值,
console.log(btn1.value);//mybtn1
/*
思考一下:
如果文档中有两个id属性一样的节点,那么会得到哪个对象呢?
*/
var btn2 = document.getElementById("btn2");
//输出对象的value值,
console.log(btn2.value);//mybtn2
/*
我们发现得到的是第一个加载文档结构中的节点.在此之后就获取不到了.
*/
/*
得到上面的结论之后,有两个问题就呼之欲出了:
1.后面元素的id对象元素到底有没有作用?
2.如果我动态修改了前一个元素id,能获取到后一次元素对象吗?
*/
/*
第一个问题
我们通过给id为btn3的元素添加样式,可以发现两个元素都是有效的,
所以基本说明这个id应该是有用的,只是不能用来通过它获取元素.
*/
/*
第二个问题
我们通过js动态修改元素id属性测试
*/
var btn3 = document.getElementById("btn3");
//动态修改第一个id=btn3元素的id=btn33
btn3.id = "btn33";
console.log(btn3.value);//mybtn3
//重新获取id=btn3的元素
var btn3 = document.getElementById("btn3");
//输出对象的value值,
console.log(btn3.value);//mybtn33
/*
通过日志,我们可以看出动态修改id之后,成功的获取到后一个元素对象
这里需要说明一下
在网上有一种说法,这个id属性不要轻易去修改,因为修改之后通过id绑定的样式不会刷新.
这个说法是对的,因为在ie5的版本,id属性只是一直只读属性.
不过在21世纪的今天,ie5估计已经绝迹了吧.
不过话说回来,元素id这个属性不光可能跟样式绑定,更关键的是可能跟事件绑定在一起,
所以在团队开发中,还是不要轻易修改为好.
*/
/*
提一个问题
如果我们传入一个不存在的id,或者传一个空串,或者什么都不传,会得到一个什么值?
*/
</script>
分享到：
相关推荐
angularjs，ng-repeat循环渲染时，无法获取dom对象
DOM对象对于js来说，是个很基础的元素，我们写js一般来说，都一定会对它进行操作。我们可以很方便地给它加上自定义的属性，比如： <div id=test class=hello></div> var test = document.getElementById(test); ...
DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法，封装工具 BOM（浏览器对象模型） 1. window 获取浏览器c窗口尺寸 2
参照prototype.js中getElementsByClassName的思想，扩展出几种在DEOM操作中可经常用到的获取对象的方法，使用获取对象变得更方便、更精确了： document.getElementsByClassName = function(className,oBox) { //...
①可以通过id获取DOM对象，例如 $(“#adom”); ②可以通过tagName获取DOM对象，例如 $(“a”); ③可以通过样式名称获取DOM对象，例如 $(“.classa”); ④可以通过attribute匹配获取DOM对象，例如 $(“[data-...
主要讲JS初级入门 从不懂到易懂得的过程 其中由for循环 while循环 if else的如何应用知识点 ， 字符串的类型 数组创建 对象的概念 DOM对象 以及随机抽人事件 如何获取验证码等简单项目
1.关于this.$refs的使用场景 如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素 ”p”>hello <!– this.$refs.p 指向该DOM元素 –> 如果ref属性加在组件上，那么this.$refs.name指向该组件实例 ...
1.jQuery对象转成DOM对象 jQuery对象不能使用DOM中的方法，但是如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不实用DOM对象的时候，有以下两种处理方法。jQuery提供了两种方法将一个...
本文实例讲述了JavaScript实现获取dom中class的方法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></...
解决webstorm调试js时Evaluate脚本获取dom属性丢失问题,百思不得其解,最后找到,原因出在webstorm调用chrome调试接口时设置了一个"ownProperties":true,设置为false即可这需要修改chrome调试插件源代码修改成这样就...
本文为大家详细介绍下父窗口中操作iframe、在子窗口中操作父窗口，获取iframe内的dom对象有两种方法，感兴趣的朋友可以了解下哈，希望对大家有所帮助
本文实例讲述了jQuery获取DOM节点。分享给大家供大家参考，具体如下： jQuery中包裹后的DOM对象实际上是一个数组，要获得纯粹的DOM对象可以有两种方式： 1、使用数组索引方式访问，例如： 复制代码 代码如下:var dom...
本文实例分析了jQuery对象与DOM对象的转换方法。分享给大家供大家参考，具体如下： ...jQuery对象的索引保存的是dom对象，所以可以通过索引将经jQuery对象转化为dom对象（实际上是获取保存在jQuery对象中的
jQuery获取当前点击的对象元素(实现代码) [removed][removed] </head> <body> 段落1 段落2 段落3 段落4 ... //获取当前点击的对象 ... //this表示当前被点击元素，但是此时我们当做dom对象
如果获取的是DOM对象，则定义如下： 代码如下: var variable = DOM对象； jQuery对象不能使用DOM中的方法，但是如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不实用DOM对象的时候，...
1 获取Dom节点 获得Dom节点代码： Title 标题一 p1 p2 var h1 = document.getElementsByTagName('h1'); var p1 = document.getElementById('p1'); var p2 = document.getElementsByClassNa
NULL 博文链接：https://code.iteye.com/blog/362729
vue.js 是数据绑定的框架，大部分情况下我们都不需要直接操作 DOM Element，但在某些时候，我们还是有获取DOM Element的需求的； 在 vue.js 中，获取某个DOM Element常用的方法是将这个元素改成一个组件 ...
一些常用的JS (JONEAjax) 获取dom 对象，ajax操作，读写cookie类代码，需要的朋友可以参考下。