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获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
ES6对象操作实例详解
May 23 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 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
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
CCPry JS类库 代码
2009/10/30 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
python静态方法实例
2015/01/14 Python
Python面向对象类的继承实例详解
2018/06/27 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
Python检测数据类型的方法总结
2019/05/20 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
Python configparser模块操作代码实例
2020/06/08 Python
C语言变量的命名规则都有哪些
2013/12/27 面试题
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
房屋改造计划书
2014/01/10 职场文书
职务聘任书范文
2014/03/29 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
公司辞职信模板
2015/05/13 职场文书
观后感格式
2015/06/19 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB