js常用DOM方法详解


Posted in Javascript onFebruary 04, 2017

介绍几个js DOM的常用方法

获取元素节点 getElementById    getElementsByTagName    getElementsByClassName

先写一个简单的网页做测试:

/*
test.html
*/
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>test</title>
</head>
<body>
 <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">这段的id是contentId。</p>
 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">这段的class name是contentClass。</p>
</body>
</html>

1.  getElementById 

 1.先定义变量 var contentId = document.getElementById("contentId");

 2.然后输出对象 contentId 就返回id为 contentId  的元素对象( <p id="contentId" style="width:500px; height: 30px;background-color: #ccc"> )。见下图:

js常用DOM方法详解

2.  getElementsByTagName  

   1.还是先定义变量  var contentTag = document.getElementsByTagName("p"); 

 2.接着我输出 contentTag ,它返回 HTMLCollection [ <p#contentId>, <p.contentClass> ] 共两个,一个以#开头表示id,另一个以.开头表示Class name。

 3.继续 contentTag[0]  输出 <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">

 contentTag[1] 输出 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">

js常用DOM方法详解

由此可知 getElementsByTagName   返回的是数组!

3.  getElementsByClassName 

  1. var contentClass = document.getElementsByClassName("contentClass");

  2. contentClass 输出 HTMLCollection [ <p.contentClass> ] 返回一个元素对象数组,即使只有一个。

  3. contentClass[0] 输出 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">

js常用DOM方法详解

我们常用的还有 getAttribute,setAttribute,ChildNodes, nodeType, nodeValue, firstChild, lastChild 方法获取一些信息。

4.分别用 getAttribute 和 setAttribute 获取和设置属性:

js常用DOM方法详解

改变style属性后:

js常用DOM方法详解

5.那么这是childNOdes:

js常用DOM方法详解

也就是说, <p></p> 在遇到块元素时,块元素之间会有一个换行符 <br> ,浏览器在查找子节点时会将它视为一个文本节点。从图中也可以看出 childNodes 返回的也是数组。

那如果是<p#contentId>呢?

js常用DOM方法详解

nodeType 的值有12种,常用的也就三种:1表示元素节点,2表示属性节点,3表示文本节点。

nodeValue 不仅可以获取文本节点的值,还可以改变文本节点的值。

js常用DOM方法详解

js的dom方法还有好多,可以看看这个W3school JS参考手册,相信对初学者有很大帮助。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
Paypal支付不完全指北
Jun 04 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
JavaScript数组操作详解
Feb 04 #Javascript
jQuery使用方法
Feb 04 #Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 #Javascript
jQuery插件autocomplete使用详解
Feb 04 #Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 #Javascript
原生js开发的日历插件
Feb 04 #Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 #Javascript
You might like
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
限制文本字节数js代码
2007/03/06 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
跟老齐学Python之类的细节
2014/10/13 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
微信跳一跳python代码实现
2018/01/05 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
Python运行异常管理解决方案
2020/03/09 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
学校岗位设置方案
2014/01/16 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
土地转让协议书
2014/09/27 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
见习报告格式要求
2014/11/04 职场文书
公司停电通知
2015/04/15 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
Java SSM配置文件案例详解
2021/08/30 Java/Android
php双向队列实例讲解
2021/11/17 PHP
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
使用Python开发冰球小游戏
2022/04/30 Python