<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>
分享到：
相关推荐
在`ng-repeat`循环渲染过程中，直接获取DOM对象可能会遇到困难，因为`ng-repeat`的渲染是动态进行的。循环内部的元素在每次数据模型更新时都可能发生变化，如果在数据更新后立即尝试获取DOM元素，那么获取到的可能是...
本文主要介绍了如何使用JavaScript来获取DOM（文档对象模型）中具有特定class的DOM元素。在讲解的过程中，涉及到JavaScript操作DOM节点的一些基本技巧和方法，如使用`getElementsByClassName`和`...
在JavaScript中，DOM对象是用于操作网页内容的关键工具。 Window对象是DOM中最高级别的对象，它代表浏览器的窗口。Window对象拥有许多属性和方法，如： - `document`：引用当前窗口中的HTML文档。 - `history`：...
DOM对象是通过JavaScript原生方法如`getElementById`、`getElementsByTagName`等获取的，它们代表了页面上的实际元素。 而jQuery对象则是通过jQuery库创建的，它封装了多个DOM元素，提供了丰富的API来简化DOM操作。...
这篇“XMLDOM对象方法手册”提供了关于如何利用XMLDOM对象进行XML操作的详细指南。 1. **XMLDOM对象的创建** 在JavaScript中，可以使用`ActiveXObject`来创建XMLDOM对象，例如： ```javascript var xmlDoc = new...
2. **XMLDOM对象** - `Document`对象：整个XML文档的根节点，可以从中获取或修改文档的所有信息。 - `Element`对象：表示XML中的元素，可以通过标签名获取或操作。 - `Attribute`对象：表示元素的属性。 - `Text...
- **DOM对象**：通过JavaScript原生方法如`getElementById()`获取的元素，可以调用DOM提供的所有属性和方法。 - **jQuery对象**：通过jQuery的选择器或者`$(...)`包裹的元素集合，提供了丰富的jQuery方法，但不能...
当你通过JavaScript的`document.getElementById`、`document.querySelector`或`document.querySelectorAll`等方法获取到的元素时，返回的就是DOM对象。DOM对象拥有原生的JavaScript属性和方法，如`innerHTML`、`...
**BOM对象与DOM对象详解** 在Web开发中，BOM（Browser Object Model）对象和DOM（Document Object Model）对象是两个至关重要的概念，它们分别处理浏览器交互和HTML文档结构的解析。 **一、BOM对象** BOM，浏览器...
原生DOM对象是由浏览器提供的API创建的，例如通过`document.getElementById`或`document.querySelector`等方法获取到的元素。原生DOM操作的优点是直接、高效，但其API较为复杂，需要编写更多的代码来实现相同的功能...
**DOM对象模型** DOM，全称为“Document Object Model”，即文档对象模型，是W3C组织定义的一个标准，用于表示HTML或XML文档的一种结构化表示方式。它将文档解析为一个由节点组成的树形结构，使得JavaScript或其他...
要从jQuery对象获取DOM对象，可以使用jQuery对象数组索引的方式，比如`$cr[0]`，就可以得到封装在jQuery对象中的第一个DOM对象。此外，jQuery的`get(index)`方法也可以实现同样的功能，用法为`$cr.get(0)`。得到DOM...
DOM文档对象是这个标准的核心，允许我们通过编程方式访问和修改页面元素。下面将详细介绍DOM文档对象以及如何在JavaScript中使用它。 首先，DOM是一个树形结构，每个HTML或XML文档都被解析为一个节点层级。根节点是...
然后，通过调用“.contents()”方法获取iframe的文档内容，这会返回iframe的Document对象。接着，使用“.find()”方法在该文档中查找具有特定id的元素，本例中是id为“test”的元素。 一旦选中了目标元素，就可以...
XMLDOM对象方法手册.chm是关于XMLDOM接口及其方法的详细参考资料，它通常包含了如何使用这些方法来查询、修改和操作XML文档的详细信息。手册中可能包括了如以下内容： 1. **createNode**：创建新的XML节点，可以是...
2. **从DOM到jQuery**：如果有一个DOM对象，想要转换成jQuery对象以便使用jQuery提供的方法，则可以使用`$(dom)`。例如，`var $cr = $(cr);`将DOM对象`cr`转换成了jQuery对象。 #### 总结 DOM与jQuery之间的关系是...
标题中的“C#操作浏览器DOM对象”指的是使用C#编程语言与Web页面的Document Object Model（DOM）进行交互。DOM是HTML和XML文档的一种结构化表示，它允许程序和脚本动态更新、添加或删除页面元素。在C#中，这通常通过...
**DOM对象快速查询手册（CHM版）** DOM（Document Object Model）是Web开发中的一个核心概念，它是一个标准，允许编程语言如JavaScript与HTML和XML文档进行交互。DOM将这些文档表示为一棵由节点组成的树，使得我们...
**DOM文档对象中文手册** DOM（Document Object Model）是W3C组织定义的一种标准，它是一种与语言无关的接口，允许程序和脚本动态地访问和更新HTML、XML以及SVG等文档的内容、结构和样式。DOM将整个文档构建成一个...
参照prototype.js中getElementsByClassName的思想，扩展出几种在DEOM操作中可经常用到的获取对象的方法，使用获取对象变得更方便、更精确了： document.getElementsByClassName = function(className,oBox) { //...