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 相关文章推荐
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
javascript常用的正则表达式实例
May 15 Javascript
jquery密码强度校验
Dec 02 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
vue.js实现简单购物车功能
May 30 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
图书管理程序(一)
2006/10/09 PHP
二招解决php乱码问题
2012/03/25 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
python的re正则表达式实例代码
2018/01/24 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
公司面试感谢信
2014/02/01 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
导游词之张家口
2019/12/13 职场文书
python 对图片进行简单的处理
2021/06/23 Python
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android