DOM节点

DOM节点分为：文档节点、元素节点、属性节点、文本节点、注释节点、（换行符br也是一个节点）。


增：append 
删：remove 
改：replace 
查：ById


如何获取节点 
porentNode:获取该元素父节点 
chidNodes:获取对象所有的子节点 
firstChild:获取该元素的第一个子节点 
lastChild:获取该元素最后一个子节点 
nextSibling:获取下一个兄弟元素 
prevoussibing:获取该元素上一个兄弟节点


新增节点：
①新建元素：creatElement 
②新建文本：TextNode 
③在元素中新增文本→标签 
④找到已有元素→获取 ⑤新增标签：aapendChild


删除节点 
①找到父节点→ById 
②找到要删除的元素→ById 
③执行删除→removeChild 
方法二：b.parentNode.removeChild(b); 
b：为要删除的标签


修改节点 
replaceChild(新的值，旧的值)


克隆节点 
cloneNode()→属性的共值


插入节点 
insretBefore(需插入的节点对象，可选)


总结：绕着头晕。。。。

时间： 2024-10-26 04:01:49

DOM节点的相关文章

DOM节点创建（jQuery）

1DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了 本文向大家介绍一下如何使用JavaScript创建div节点元素,主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容,相信本文介绍一定会让你有所收获. 先介绍下需要用到的浏览器提供的一些原生的

解析DOM节点对象的属性

1.文档对象模型(DOM) 定义:允许程序和脚本访问.更改文档内容.样式和结构.它是平台无关的,意味着可以在任何计算机上使用它.它是语言无关的,以为着它能够交换客户机和服务器之间的信息,而不管任意一边使用什么语言. 2.DOM节点 DOM把HTML(或XML)文档视为一颗或者一组数(是指结构类似),也就是有一个顶层和多个构成子层的分支,并且每个子层又有分支和更多子层,顶层是文档(document),而文档的根元素是<html>. 3.节点对象属性 DOM节点对象的属性 属性 方法 childN

随笔一个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

jQuery DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作. 一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点 $('di

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes    子节点 firstChild    父节点里的第一个子节点 lastChild     父节点里的最后一个子节点 nextSibling    与子节点并列的下一个兄弟节点 previousSibling   与子节点并列的上一个兄弟节点 火狐与谷歌支持而ie8不支持的节点关系有: previous

[ jquery 属性 .context ] 返回传给jQuery()的原始的DOM节点内容

返回传给jQuery()的原始的DOM节点内容:即jQuery()的第二个参数.如果没有指定,那么context指向当前的文档(document),可以与selector一起使用,用于精确检测选择器查询情况 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content=

访问DOM节点

我们来个例子,一个HTML里包含一段文本和一个无序的列表. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head&

DOM节点操作方法

只读的关系指针 DOM中的关系指针都是只读的 <div class="box" id="box"></div> <script> var oBox = document.getElementById('box'); console.log(oBox.parentNode.nodeName);//BODY //在IE8-浏览器下会报错,在其他浏览器下忽略此条语句 oBox.parentNode = document; console

HTML DOM 节点

在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. DOM 节点 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 整个html文档也可以看作是一个节点,一个根节点,一个文档节点,document 节点 HTML 文档是由 HTML 元素定义的. 每个 HTML 元素是元素节点,什么是HTML 元素?