<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>获取dom对象</title>
</head>
<body>
<input name="btn1" type="button" value="mybtn1" />
<input name="btn1" type="button" value="mybtn2" />
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
getElementsByName(name);
该方法可以获取到name相同的dom对象集合.
因为name属性在文档中允许值相同,所以不管name的值在文档中是否唯一,返回的结果都是一个集合.
我们需要通过下标获取单个的dom对象.
例如:常见的单选框我都需要把name属性设置相同的值,让他们成为一组.
*/
/*
获取name=btn1的dom
写代码的时候需要注意这个接口是getElements,多了一个s,这也从命名上说明了返回值是多个.
*/
var btns = document.getElementsByName("btn1");
//输出对象的length值,
console.log(btns.length);//2
//获取第一个dom对象
var btn1 = btns[0];
//输出btn1的value
console.log(btn1.value);//mybtn1
/*
思考一下:
既然是通过类似数组方式获取数据,那么getElementsByName返回的是Array吗?
*/
/*
我们知道js的基础数据类型,是没有数组的.
这六种类型分别是:
number,string,boolean,object,function,undefined
可能大家还能想到null,Array,Date,RegExp等,但是这都不是js的基础数据类型.
那怎么验证这六种数据格式呢,其实也很简单.
直接使用typeof运算符就可以得到,注意哦typeof只是一个一元运算符,不是函数.
*/
console.log(typeof 1);//number
console.log(typeof "1");//string
console.log(typeof true);//boolean
console.log(typeof []);//object
console.log(typeof {});//object
console.log(typeof null);//object
console.log(typeof function(){});//function
console.log(typeof a);//undefined
/*
可以看出使用typeof运算符只能得到6个类型,这就是js的基础数据类型了.
*/
/*
回到上面的问题,btns是什么类型呢?
*/
//使用typeof运算一下
console.log(typeof btns);//object
/*
发现返回的结果也是object,但是数组typeof运算之后也是object.
所以通过typeof并不能判断.
那怎么办呢?
是的天无绝人之路,我们发现js还有一个运算符instanceof.
instanceof运算符与typeof运算符差不多,用来判定对象的数据类型.
与typeof不同的是,instanceof能够明确地判定对象是否是某种类型的实例.
*/
//Array类型
console.log([] instanceof Array);//true
//btns呢
console.log(btns instanceof Array);//false
/*
通过判定得知,btns并不是Array类型,只是一个类似array的对象集合.
我也不知道这样描述对不对,感觉应该跟arguments很类似吧,是js中一种特有的对象,并且拥有length属性.
提一下instanceof返回值的只有true/false.
*/
/*
知识点:
typeof运算符
instanceof运算符
其实instanceof还有更多更有意思用法.
*/
function testA(){};
var t = new testA();
console.log(t instanceof testA);// ?
function testB(){};
testB.prototype = new testA();
var t2 = new testB();
console.log(testB.prototype instanceof testA);// ?
console.log(t2 instanceof testA);// ?
console.log(t2.prototype instanceof testA);// ?
</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元素 ...2.为什么有时候通过this.$refs.name来获取会报错？ 一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs来
本文实例讲述了jQuery获取DOM节点。分享给大家供大家参考，具体如下： jQuery中包裹后的DOM对象实际上是一个数组，要获得纯粹的DOM对象可以有两种方式： 1、使用数组索引方式访问，例如： 复制代码 代码如下:var dom...
如果获取的是DOM对象，则定义如下： 代码如下: var variable = DOM对象； 1.jQuery对象转成DOM对象 jQuery对象不能使用DOM中的方法，但是如果对jQuery对象所提供的方法不熟悉，或者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对象，所以可以通过索引将经jQuery对象转化为dom对象（实际上是获取保存在jQuery对象中的
jQuery获取当前点击的对象元素(实现代码) [removed][removed] </head> <body> 段落1 段落2 段落3 段落4 ... //获取当前点击的对象 ... //this表示当前被点击元素，但是此时我们当做dom对象
如果获取的是DOM对象，则定义如下： 代码如下: var variable = DOM对象； jQuery对象不能使用DOM中的方法，但是如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不实用DOM对象的时候，...
JavaScript操作DOM对象 0 核心 浏览器网页就是一个Dom树形结构！ 获取Dom节点：得到Dom节点 更新：更新Dom节点 添加：添加一个新的节点 删除：删除一个Dom节点 要操作一个Dom节点，就必须要先获得这个Dom节点。 1 ...
WebView2.DOM 与WebView2一起使用的C＃DOM绑定。 这仍然是Beta版软件，尚未准备好投入生产 介绍 使用此库，您可以直接在C＃中控制WebView2的内容，并具有C＃提供的类型安全的所有优点。 例如，您可以这样做： ...
NULL 博文链接：https://code.iteye.com/blog/362729
vue.js 是数据绑定的框架，大部分情况下我们都不需要直接操作 DOM Element，但在某些时候，我们还是有获取DOM Element的需求的； 在 vue.js 中，获取某个DOM Element常用的方法是将这个元素改成一个组件 ...