js中DOM操作复习总结

获取DOM节点的方法有哪些
1.通过document获取节点:
(1)document.getElementById(元素ID):通过元素id获取节点
(2)document.getElementsByName(元素name属性):通过元素的name属性获取节点
(3)document/element.getElementsByTagName(元素标签):通过元素标签获取节点
(4)document/element.getElementsByClassName(class属性值):返回拥有指定class的对象集合
(5)document/element.querySelector(CSS选择器):仅返回第一个匹配的元素
(6)document/element.querySelectorAll('CSS选择器'):返回所有匹配的元素
(7)document.documentElement:获取页面中的HTML标签即整个文档的根节点,页面具有 DTD或者说指定了DOCTYPE时使用
(8)document.body:获取页面中的BODY标签,页面不具有 DTD或者说没有指定DOCTYPE时使用
(9)document.all['']:获取页面中的所有元素节点的对象集合型
2.通过节点指针获取节点:
(1)a.firstChild:获取元素a的首个子节点
(2)a.lastChild:获取元素a的最后一个子节点
(3)a.childNodes:获取元素a的所有子节点列表
(4)b.previousSibling:获取已知节点b的前一个节点
(5)b.nextSibling:获取已知节点b的后一个节点
(6)b.parentNode:获取已知节点的父节点

DOM节点的各种操作方法:
1.创建节点的方法:
(1)document.createElement(元素标签):创建元素节点
(2)document.createAttribute(元素属性):创建属性节点
(3)document.createTextNode(文本内容):创建文本节点
(4)document.createComment('注释节点'):创建新的注释节点
(5)document.createDocumentFragment( ):创建文档碎片节点(提高效率);
2.插入节点的方法:
(1)appendChild(所添加的新节点):向节点的子节点列表的末尾添加新的子节点
(2)insertBefore(所添加的新节点,已知子节点):在已知的子节点前插入一个新的子节点
3.替换节点:
replaceChild(要插入的新元素,将被替换的老元素):用新节点替换父节点中已有的子节点;若原元素已有该节点,element.setAttributeNode( attributeName )和element.setAttribute( attributeName, attributeValue )也能达到修改该属性值的目的
4.复制节点:
cloneNode(true/false):创建指定节点的副本,若参数为true则复制当前节点及其所有子节点,若参数为false则仅复制当前节点
5.删除节点:
removeChild(要删除的节点):删除指定的节点

DOM属性操作方法有哪些:
1.获取属性节点:
a.getAttribute(元素属性名):获取元素节点a中指定属性的属性值
2.设置属性节点:
a.setAttributeNode(元素属性名):给元素a增加属性节点
a.setAttribute(元素属性名,元素属性值):给元素a增加指定属性并设定属性值,或者改变元素a的某个属性值
3.删除属性节点:
a.removeAttribute(元素属性名):删除具有指定属性名称的属性,无返回值
a.removeAttributeNode(元素属性名):删除指定属性,返回值为删除的属性值

DOM文本操作方法:
insertData(offset,String):从offset指定位置插入string
appendData(string):把string插入到文本节点末尾处
deleteData(offset,count):从offset起删除count个字符
replaceData(off,count,string):从off将count个字符用string替代
splitData(offset):从offset起将文本节点分成两个节点
substring(offset,count):返回由offset起的count个节点

时间: 2024-12-05 10:58:19

js中DOM操作复习总结的相关文章

jQuery中DOM操作实例分析_jquery

本文实例讲述了jQuery中DOM操作的方法.分享给大家供大家参考.具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式).属性的修改.样式的修改.动态绑定事件 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.

js使用DOM操作实现简单留言板的方法_javascript技巧

本文实例讲述了js使用DOM操作实现简单留言板的方法.分享给大家供大家参考.具体分析如下: 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素 要点二:父元素.appendChild("元素")  把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来 要点三:父元素.insertBefore("元素","要插入哪个元

简单实现JS对dom操作封装_javascript技巧

这篇文章主要介绍了JS简单实现对dom操作封装,下面就直接上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

js使用DOM操作实现简单留言板的方法

 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素 要点二:父元素.appendChild("元素") 把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来 要点三:父元素.insertBefore("元素","要插入哪个元素的前面") 把新建的元素插入到页面中指定的标签前面,这样后面输入的内容才会显示到

jQuery 中DOM 操作详解_jquery

jQuery 中的 DOM 操作 DOM(Document Object Model-文档对象模型):一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML HTML DOM: 使用 JavaScript和 DOM 为 HTML文

jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果_jquery

但感觉这样写很没意思. jquery的优势就是简单的代码就能带来更好的用户体验. 所以就找几个我感觉实用的例子,拿出来介绍下.顺带把其中用到的操作和事件介绍下. html代码: <input type="text" id="address" value="请输入邮箱地址"/> jquery代码: 复制代码 代码如下: $(document).ready(function(){ $('#address').focus(function(

jquery中dom操作和事件的实例学习-表单验证_jquery

很显然,这样做能提升更好的用户体验. html代码: 复制代码 代码如下: <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="r

Node.js中JavaScript操作MySQL的常用方法整理_node.js

一.建立数据库连接:createConnection(Object)方法      该方法接受一个对象作为参数,该对象有四个常用的属性host,user,password,database.与php中链接数据库的参数相同.属性列表如下: host: 连接数据库所在的主机名. (默认: localhost)  port: 连接端口. (默认: 3306)  localAddress: 用于TCP连接的IP地址. (可选)  socketPath: 链接到unix域的路径.在使用host和port时

js中dom与jquery中$测试笔记

一个测试dom和$的小东东, 只为留着, 不为别的  代码如下 复制代码 //DOM是已知的 var J_top_bar = document.createElement("div"); J_top_bar.style.cssText = 'position:fixed;left:100px;top:100px;background-color:#fff;color:#000;padding:10px;border:2px solid #09f;'; document.body.app