http://www.codesec.net/view/222099.html
节点类型
节点类型主要有三种:元素节点,属性节点和文本节点。
而对DOM的主要也就是围绕 元素节点和属性节点 的 增删改查 。下面就分别从对元素节点的操作和对属性节点的操作来介绍。
元素节点 查
在对DOM进行增删改之前,首先要找到对应的元素。具体的查找方法如下:
getElementByID() // 得到单个节点
getElementsByTagName() // 得到节点数组 NodeList
getElementsByName() // 得到节点数组 NodeList
同时还可以利用元素节点的属性获取它的父子节点和文本节点:
子节点
Node.childNodes //获取子节点列表NodeList; 注意换行在浏览器中被算作了text节点,如果用这种方式获取节点列表,需要进行过滤
Node.firstChild //返回第一个子节点
Node.lastChild //返回最后一个子节点
父节点
Node.parentNode // 返回父节点
Node.ownerDocument //返回祖先节点(整个document)
同胞节点
Node.previousSibling // 返回前一个节点,如果没有则返回null
Node.nextSibling // 返回后一个节点
增
新增节点首先要创建节点,然后将新建的节点插入DOM中,所以下面分别介绍创建节点和插入节点的方法,复制节点的方法也在创建节点中进行介绍。
创建节点
createElement() // 按照指定的标签名创建一个新的元素节点
复制节点
clonedNode = Node.cloneNode(boolean) // 只有一个参数,传入一个布尔值,true表示复制该节点下的所有子节点;false表示只复制该节点
插入节点
parentNode.appendChild(childNode); // 将新节点追加到子节点列表的末尾
parentNode.insertBefore(newNode, targetNode); //将newNode插入targetNode之前
改
替换节点
parentNode.replace(newNode, targetNode); //使用newNode替换targetNode
删
移除节点
parentNode.removeChild(childNode); // 移除目标节点
属性节点
操作属性节点,就是对DOM样式进行增删改查。对于行内样式、内联样式、外部样式有不同的操作方法;各种方法获得的样式也有可读可写和只读之分。
直接获取CSS样式
node.style.color // 可读可写
Style本身的属性和方法
node.style.cssText //获取node行内样式字符串
node.style.length //获取行内样式个数
node.style.item(0) //获取指定位置的样式
只读方法
getComputedStyle是window的方法。它能够获取传入节点的全部样式,但是只可读、不可写。它有两个参数,第一个为传入的节点,第二个可以传入:hover, :blur等获取其伪类样式,如果没有则传入null。
然而IE并不支持getComputedStyle方法,可以用currentStyle实现该功能:
window.getComputedStyle ? window.getComputedStyle(node, null) : node.currentStyle
相关推荐
Javascript_Dom操作案例 总结了一些javascript对DOM操作的案例,希望对大家有所帮助
1、DOM简介。...所以学习JS的起点就是处理网页,处理网页就需要使用DOM进行操作。 2、DOM获取元素。 JS要想操作HTML元素,那么首先就必须先找到该元素。通常使用以下几种方法完成: 通过元素设置的id找
下面小编就为大家带来一篇JavaScript DOM节点操作方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
DM是(Document Object Model)的简称。 一.找元素 document.getElementById() 根据id选择器找,最多找一个; document.getElementsByName() 根据name找,找出的是数组; document.getElementsByclassName()...
DOM添加元素,使用节点属性 DOM添加元素,使用节点属性 Item 1 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]一、DOM基础1.节点(node)层次Document--最顶层的节点,所有的其他节点都是附属于它的。...
文章目录DOM总结1、DOM1)DOM结构2)DOM节点a、节点分类b、节点之间的关系c、选择器——找到节点3)DOM修改a、innerTextb、innerHTMLc、 属性 : value,style ,width2、DOM操作1) 单个HTML DOM节点的操作a、找到...
JavaScript学习资料JavaScript基础语法函数及相关源代码资料: BOM基础.pdf BOM基础(源代码).zip Date对象之获取和设置月份-...JavaScript常用运算符和操作符总结(教辅).pdf JavaScript数组(源代码).zip JavaScri
js基础,DOM操作总结
主要介绍了JavaScript DOM节点操作,结合实例形式总结分析了JS操作DOM实现新建与删除HTML元素的具体步骤与相关技巧,需要的朋友可以参考下
本文实例总结了Javascript DOM事件操作。分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等。 效果图: 代码: <!DOCTYPE ...
JavaScript培训学习PPT教程(js资料和源代码) ...JavaScript常用运算符和操作符总结(教辅).pdf JavaScript数组(源代码).zip JavaScript流程控制语句(ppt).pdf JavaScript语法和数据类型(源代码).z
主要介绍了javascript性能优化之DOM交互操作技巧,结合实例形式总结分析了JavaScript针对DOM操作过程中的各种常见优化操作技巧,需要的朋友可以参考下
自己平时可能也会经常遇到所以总结如下: 1,dom元素的创建 2,dom元素的插入 3,dom元素替换 4,dom元素的删除 首先页面上有这么些简单的dom元素 ”wrap”> ”a”>aaaaaaaa</div> ”b”>bbbbbbbb</div> ”c”>...
主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下
非常经典的javascript总结实例包含了DOM对象的操作,XML文档解析操作的详细简答。
总结(使用哪种方式好) 18 2. 修改对象 18 (1) 创建新方法 18 (2) 重命名已有方法 19 (3) 添加与已有方法无关的方法 19 (4) 为本地对象添加新方法 19 3. 对象类型转换 19 (1) 转换成字符串 19 (2) 转换成数字 20 ...
我个人认为适合初学,当然这里是100个例子,只对dom操作的,希望大家注意总结 ,总结成自己的才是最好的,是哪个网站的例子我也忘记了,呵呵。 弘扬开源精神,杜绝积分下载
享元模式最适合于解决因创建大量类似对象而累及性能的问题,本文将来总结JavaScript设计模式编程中的享元模式使用,包括在DOM操作时的利用示例: