JavaScript文档对象模型document对象查找Html元素(2)

1.document对象查找Html元素

以下表格是获取Html元素的常用方法：
（1.）getElementById方法：返回值是元素对象，如果没有符合的条件对象，则返回为null；

（2.）getElementsByTagName: 返回值是数组对象，如果没有符合条件的对象，则返回为空数组

（3.）getElementsByName: 返回的是指定标签名的元素对象集合，如果无符合条件的对象，则返回为空数组。

（4.）getElementsByClassName: 返回值为指定类名的元素集合，元素集合中的顺序以其中在代码中出现的次序排序，可通过下标方式来访问指定的元素 （索引号从0开始）

2.Html新增的获取元素方法

以下代码作为案例复习：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div class="box">盒子1</div><div class="box">盒子2</div><ul><li>1111</li><li>2222</li></ul><script>//使用getElementsByClassName方法返回指定类名元素集合var obj = document.getElementsByClassName('box');console.log(obj);//使用querySelector方法返回指定选择器第一个元素对象 // 切记 里面的选择器需要加符号，这样开发工具和网站会自动识别 如.box #box var obj2 = document.querySelector('.box');console.log(obj2);   //返回的是盒子1元素对象//使用querySelectorAll方法返回指定选择器元素对象集合var obj3 = document.querySelectorAll('li');console.log(obj3);</script></body>
</html>

JavaScript文档对象模型document对象查找Html元素(2)相关推荐

JavaScript文档对象模型document对象改变Html元素样式属性(5)
1. document对象改变Html元素样式属性行内样式操作案例如下: <!DOCTYPE html> <html><head><meta charset ...
JavaScript文档对象模型document对象改变Html元素内容(3)
1.document对象改变Html元素内容 (1.)innerText不会自动解析html标签,会将代码前后的空格和换行去掉 innerHTMl会自动解析html标签,保留代码前后的空格和换行 (推 ...
JavaScript文档对象模型document对象改变Html表单属性(4)
1.document对象改变Html表单属性更改Html元素内容时候可以用innerHtml属性进行修改,但是表单元素只能用value属性修改元素内容案例如下: <!DOCTYPE html ...
JavaScript文档对象模型document对象获取自定义属性值和设置移除自定义属性(5)
得出结论:element .属性只能获取内置对象属性值,而element.getAtrribute('属性')不仅可以获取内置对象属性值,还可以获取自定义属性值获得属性值案例: <!DOCTY ...
javaScript文档对象模型DOM
文档对象模型DOM 文档对象模型(document object model) 有一个表格,点击添加按钮添加事件 DOM中的属性和方法的理解 DOM中属性的操作: 属性映射表文档对象模型(docum ...
JavaScript——文档对象模型
一.基本概念文档对象模型(DOM)是表示文档和访问.操作构成文档的各种元素的应用程序接口(API).它解决了NetScape的JavaScript和Microsoft的JavaScript之间的冲突 ...
DOM4J解析XML文档、Document对象、节点对象节点对象属性、将文档写入XML文件（详细）...
Dom4j是一个简单.灵活的开放源代码的库.Dom4j是由早期开发JDOM开发的.与JDOM不同的是,dom4j使用接口和抽象的人分离出来而后独立基类,虽然Dom4j的API相对要复杂一些,但它提供了 ...
JavaScript文档对象模型DOM节点操作之复制节点（7）
示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
JavaScript文档对象模型DOM节点操作之兄弟节点（4）
示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...

JavaScript文档对象模型document对象查找Html元素(2)

1.document对象查找Html元素

2.Html新增的获取元素方法

JavaScript文档对象模型document对象查找Html元素(2)相关推荐

最新文章

热门文章