10.DOM节点

  • Node类型 (someNode.nodeType[.nodeName][.nodeValue])

Node.ELEMENT_NODE(1);

Node.ATTRIBUTE_NODE(2);

Node.TEXT_NODE(3);

Node.CDATA_SECTION_NODE(4);

Node.ENTITY_REFERENCE_NODE(5);

Node.ENTITY_NODE(6);

Node.PROCESSING_INSTRUCTION_NODE(7);

Node.COMMENT_NODE(8);

Node.DOCUMENT_NODE(9);

Node.DOCUMENT_TYPE_NODE(10);

Node.DOCUMENT_FRAGMENT_NODE(11);

Node.NOTATION_NODE(12);

  • 节点关系

parentNode(childNodes)当前节点的父(子)节点

firstChild(lastChild)第(最后)一个子节点

previousSibling(nextSibling)上(下)一个兄弟节点

  • 操作节点

appendChild()、insertBefore()、replaceChild()、cloneNode()

时间： 2024-10-08 10:29:00

10.DOM节点的相关文章

随笔一个dom节点绑定事件

以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的html内容. button点击事件:会生成一个li节点. 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 </head> 5 <body> 6 <ul class="ul

[js高手之路]HTML标签解释成DOM节点

最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支持,为什么说这事,跟这篇文章的主题有毛关系呢?因为这篇文章要讲的就是我在写框架过程中碰到的一个问题,封装jquery的after方法,支持DOM和html标签两种用法,html标签传参,我要把html解释成DOM结构,用DOM的方法插入. 首先,我们写个通用的html标签: <div onclick

通过DOM节点操作来获取表单信息

这是之前突发奇想地用dom节点的关系来操作表单的故事.. 事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复.这个页面呢,就是通过foreach获取到数据库里的信息,把用户的ID以及留言信息最后呈现在界面上的样子大概如下图(我的画图天赋真是杠杠滴)(害羞捂脸) 没错就是这么酷炫的. 左侧是用户的ID 中间是用户留言内容 每个后面都有一个回复按钮 管理员点击回复之后 相应的留言框下部就会出现一个文本框,然后就可以愉快的回复了.对了还有一个回复发送以及删除功能

JS 操作Dom节点之样式

为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式: <!--body --><div style="width: 30px;background-color: #ff6a00;">我就是傻里傻气的,完全素颜!</div> 1 //内联样式优先级最高,通过style获取的样式是最准确的 2 var el

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

× 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源 特征 创建文档片段,要使用document.createDocumentFragment()方法.文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作 文档片段节点的三个node属性——nodeType.nod

javascript中12种DOM节点类型概述

× 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DO

Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 一.nodeName 属性: 节点的名称,是只读的. 1. 元素节点的 nodeName 与标签名相同 2. 属性节点的 nodeName 是属性的名称 3. 文本节点的 nodeName 永远是 #text 4. 文档节点的 nodeName 永远是 #document 二.nodeV

js删除dom节点时候索引出错问题

我们知道删除一个dom节点的时候索引就会发生了改变,甚至是错误,就算jq的ecah也无能为力,所以我们只能自己写个功能了 直接上代码把,不多说 <!DOCTYPE html> <html> <head>  <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>  <meta http-equiv="Content-Type"

WEB入门之十六 操作DOM节点

学习内容 jQuery插入DOM节点 jQuery删除DOM节点 jQuery替换DOM节点 jQuery筛选DOM节点 能力目标 能熟练使用jQuery进行节点操作 能熟练使用jQuery进行节点筛选 本章简介 DOM是Document Object Model的缩写,即文档对象模型,它是W3C的标准规范,提供了使用JavaScript操纵页面元素的接口.节点是DOM中最基本的组成单位,每个标签.每个文本都可以看成是一个节点.本章将学习使用jQuery对DOM节点进行操作. 核心技能部分 7.