JavsScript中DOM的基本操作
节点及其类型
- 元素节点
- 属性节点: 元素的属性, 可以直接通过属性的方式来操作.
- 文本节点: 是元素节点的子节点, 其内容为文本.
在 html 文档的什么位置编写 js 代码
直接在 html 页面中书写代码, js 和 html 强耦合, 不利用代码的维护
- 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成,
- 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.
在整个 html 文档的最后编写类似代码,有利于页面的加载
window.onload = function(){};
获取元素节点
- document.getElementById: 根据 id 属性获取对应的单个节点
- document.getElementsByTagName:根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度
- document.getElementsByName:
根据节点的 name 属性获取符合条件的节点数组,但 ie 的实现方式和 W3C 标准有差别:
- 在 html 文档中若某节点(li)没有 name 属性,则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.
获取属性节点
- 可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值
- 通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue 来读写属性值
获取元素的子节点
- childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
- firstChild 属性获取第一个子节点
- lastChild 属性获取最后一个子节点
获取文本节点
- 步骤: 元素节点 --> 获取元素节点的子节点
- 若元素节点只有文本节点一个子节点, 可以先获取到指定的元素节点 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值
节点的属性
nodeName:代表当前节点的名字。只读属性,如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
nodeType:返回一个整数, 这个数值代表着给定节点的类型,只读属性。1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点
nodeValue:返回给定节点的当前值(字符串). 可读写的属性
- 元素节点, 返回值是 null.
- 属性节点: 返回值是这个属性的值
- 文本节点: 返回值是这个文本节点的内容
创建一个元素节点
1). createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数:被创建的元素节点的名字, 是一个字符串.
方法的返回值:是一个指向新建元素 节点的引用指针.
新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.
创建一个文本节点
createTextNode()
- 返回值是一个指向新建文本节点引用指针.
- 方法只有一个参数:新建文本节点所包含的文本字符串.
- 新元素节点不会自动添加到文档里
为元素节点添加子节点
- appendChild(), 方法的返回值是一个指向新增子节点的引用指针.
- 直接用innerHTML属性也行
节点的替换
replaceChild(newChild,oldChild):
- 把一个给定父元素里的一个子节点替换为另外一个子节点
- 返回值是一个指向已被替换的那个子节点的引用指针
该节点除了替换功能以外还有移动的功能.
该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
function replaceEach(aNode, bNode){if(aNode == bNode){return;
}
var aParentNode = aNode.parentNode;
//若 aNode 有父节点
if(aParentNode){var bParentNode = bNode.parentNode;
}
//若 bNode 有父节点
if(bParentNode){var tempNode = aNode.cloneNode(true);bParentNode.replaceChild(tempNode, bNode);aParentNode.replaceChild(bNode, aNode);
}
插入节点
insertBefore(newNode,targetNode):
- 把一个给定节点插入到一个给定元素节点的给定子节点的前面
- 节点 targetNode 必须是 element 元素的一个子节点
- 该方法同时含有移动的功能。
自定义 insertAfter() 方法(将 newChild 插入到 refChild 的后边 )
function insertAfter(newChild, refChild){var refParentNode = refChild.parentNode;//判断 refChild 是否存在父节点if(refParentNode){//判断 refChild 节点是否为其父节点的最后一个子节点if(refChild == refParentNode.lastChild){refParentNode.appendChild(newChild);}else{// 下一个兄弟节点refParentNode.insertBefore(newChild, refChild.nextSibling); }}
}
删除节点:
removeChild(node)
- 从一个给定元素里删除一个子节点
- 返回值是一个指向已被删除的子节点的引用指针. 节点被删除时, 这个节点所包含的所有子节点将同时被删除.
- 如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。
DOM对象与JQuery对象互转
jQuery对象是一个DOM对象数组,可以使用数组下标的方式转为DOM对象
var btn = $("#btn-add")[0];
$(dom)将Dom转为jquery对象
转载于:https://www.cnblogs.com/mabaoqing/p/10624979.html
JavsScript中DOM的基本操作相关推荐
- JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
- DOM的基本操作,节点的基本属性
前言 作为小白一直在学习web的路上慢慢摸索,之前也不知道怎么写一篇博客,但是,这不,第一篇博客就这么很突然地在一个午后决定开始写了.最近在学习dom的相关知识,大概总结一下. 什么是DOM? DOM ...
- HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)
HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...
- C语言中文件的基本操作函数fprintf和fscanf实例介绍
C语言文章更新目录 C/C++学习资源(百度云盘链接) 计算机二级资料(过级专用) C语言学习路线(从入门到实战) 编写C语言程序的7个步骤和编程机制 C语言基础-第一个C程序 C语言基础-简单程序分 ...
- matlab中的图像,MATLAB中图像的基本操作
MATLAB中图像的基本操作 1.读取.显示图片 MATLAB中提供了immread()与imshow()函数读取和显示图片.其中读取函数imread()原型: imread: A= imread(f ...
- Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景 在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
- python连接mongodb进行查询_Python中的MongoDB基本操作:连接、查询实例
MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可护展的高性能数据存储解决方案.它的特点是高性能.易部署.易使用,存储数据非常方便. MongoDB 简单使用 联 ...
- MySQL学习笔记03【数据库表的CRUD操作、数据库表中记录的基本操作、客户端图形化界面工具SQLyog】
MySQL 文档-黑马程序员(腾讯微云):https://share.weiyun.com/RaCdIwas 1-MySQL基础.pdf.2-MySQL约束与设计.pdf.3-MySQL多表查询与事务 ...
- pythonxml解析拿到控件坐标_Python解析xml中dom元素的方法
本文实例讲述了Python解析xml中dom元素的方法.共享给大家供大家参考.详细实现方法如下: 复制代码 代码如下: from xml.dom import minidom try: xmlfile ...
最新文章
- 项目管理深入理解08--成本管理
- hibernate笔记(三) Hibernate标识符属性(主键)生成策略全析
- 闲来无事 linux cp命令的三种实现方式
- 一些前端面试题(一)
- 如何创建最简单的 SAP Kyma Function
- 实时--1.1 日志数据分析
- javaweb项目自动设置热加载
- Java数据结构(1)---顺序表
- 用冰封服务器安装系统,用冰封PE来安装windows纯净版系统
- linux终端清除命令,ubuntu清除命令行记录
- 从步履蹒跚到举重若轻,阿里基础架构如何扛住全球最猛的流量洪峰?
- 常见的输入、输出、存储设备
- 联结全球技术桥梁,TGO 鲲鹏会台北分会将于 6/24 成立
- 挪威访学2:SOLA UIS 学生宿舍
- 【现控】时不变连续系统
- u-boot (1) —— 编译分析
- C++学习之第八天-解析RSS文件
- LABS1000-01空盒气压计检定系统
- 广度优先搜索算法带图详解
- 2015年职称计算机考试宝典,2015年度职称计算机考试宝典.doc
热门文章
- chrome 插件 vimium 介绍
- TeX下的Markdown包
- ROS探索总结(四)(五)(六)——简单的机器人仿真 创建简单的机器人模型smartcar 使用smartcar进行仿真
- Oracle编程入门经典 第9章 掌握SQL*Plus
- 循环神经网络教程4-用Python和Theano实现GRU/LSTM RNN, Part 4 – Implementing a GRU/LSTM RNN with Python and Theano
- MIT自然语言处理第一讲:简介和概述(第二部分)
- Taylor泰勒级数
- 【python图像处理】图像的缩放、旋转与翻转
- SuperTuxKart 1.0 发布,开源赛车游戏
- java日志处理汇总