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 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
react 路由Link配置详解
Nov 11 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
简单的过滤字符串中的HTML标记
2006/12/25 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php操作xml
2013/10/27 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python文件与目录操作实例详解
2016/02/22 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python入门_条件控制(详解)
2017/05/16 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
曼城官方网上商店:Manchester City
2019/09/10 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
网上书店创业计划书
2014/01/12 职场文书
函授药学自我鉴定
2014/02/07 职场文书
2014年库房工作总结
2014/11/26 职场文书
2015年预算员工作总结
2015/05/14 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书