dom节点及对节点的常用操作方法
在说dom节点前,先来看看页面的呈现:
dom渲染流程:
 1、浏览器解析html源码,然后创建一个DOM树。
在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement,对应的是html标签。
 
2、浏览器解析CSS代码,计算出最终的样式数据。
对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置,用户设置,外联样式,内联样式,html中的style(嵌在标签中的行间样式)。
 
3、创建完DOM树并得到最终的样式数据之后,构建一个渲染树。
渲染树和DOM树有点像,但是有区别。DOM树完全和html标签一一对应,而渲染树会忽略不需要渲染的元素(head、display:none的元素)。渲染树中每一个节点都存储着对应的CSS属性。
 
4、当渲染树创建完成之后,浏览器就可以根据渲染树直接把页面绘制到屏幕上。
 
那我们的节点大致是12种:
我们平常可见的也就文本节点,属性节点,元素节点,注释节点等...
先来看看获取节点:
childNodes:获取元素下的所有节点:返回一个数组
var box_ele = document.getElementById("box");
var child_nodes = box_ele.childNodes;
nodeType:辨别元素的类型
1=> 元素节点
2=> 属性节点
3=》 文本节点
4....
nodeValue:获得文本节点的值
 
 
children:获取元素下的所有元素节点:返回一个数组
var box_ele = document.getElementById("box");
var child_nodes = box_ele.children;
 
一般而言,我们多用childr。
nodeName:判定元素的类型 返回标签的大写 如:DIV SPAN等.
 
另外的获取:关系型节点获取
子集类:
firstChild:第一个子节点
firstElementChild:第一个元素子节点
lastChild:最后一个子节点
lastElementChild:最后一个元素子节点
 
兄弟类:
nextSibling:下一个节点
nextElementSibling:下一个元素节点
previousSibling:上一个节点
previousElementSibling:上一个元素节点
 
父级类:
parentNode:父节点
 
特别注意的:
属性节点:
由于属性都是在元素里边的,所以属性节点获取一定是在元素节点之上。
var box_ele = document.getElementById("box");
var attributes = box_ele.attributes;
 
这里的attributes是一个数组:
属性分为属性和属性值:
那我们可以通过之前的nodeType,nodeName,nodeValue来看看attributes里的内容:
如:
attributes[0].nodeType
attributes[0].nodeName
attributes[0].nodeValue
 
 
以上是对节点的获取,下面看一看对节点的操作:
首先看看如何穿创建一个节点;
var ele = document.createElement("div");
创建一个div节点
ele.innerHTML = "你好世界";
加入内容,再放入页面中:
如何放入呢?
ele.appendChild(node)  把node节点插入到box的内部最后的位置
ele.insertBefore(newNode, existNode)  在box内,把newNode节点插入到exsitNode的前面
通过appendChild或者insertBefore都可以!
 
再来看看如何删除:
removeChild():这个方法需要找到父节点再删除:
box.parentNode.removeChild(box);
box.remove();
remove:直接删除!但:兼容极差。
 
节点的克隆
cloneNode():克隆当前层,不会深层次克隆。
cloneNode(true):整层及以下都克隆。
 
最后就是节点替换了:
obj.replaceChild(新添加的节点 , 被替换的节点)  替换子节点
 
 
 
 
 
 
 
 
 
 
 
 
 

dom节点及对节点的常用操作方法的更多相关文章

  1. DOM中元素节点、属性节点、文本节点

    DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...

  2. jacascript DOM节点——元素节点、属性节点、文本节点

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点 ...

  3. JavaScript HTML DOM 元素操作(节点)

      在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点 ...

  4. 轻松学习JavaScript二十二:DOM编程学习之节点操作

    DOM编程不只能够查找三种节点,也能够操作节点.那就是创建,插入,删除.替换和复制节点.先来看节点 操作方法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  5. html5中的dom中的各种节点的层次关系是怎样的

    html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...

  6. 第10章 文档对象模型DOM 10.1 Node节点类型

    DOM是针对 HTML 和 XML 文档的一个 API(应用程序编程接口) .DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.DOM 脱胎于Netscape 及微软公司创始 ...

  7. jQuery-1.9.1源码分析系列(十一) DOM操作续——克隆节点

    什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位 ...

  8. DOM中元素节点、属性节点、文本节点的理解

    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...

  9. React虚拟DOM具体实现——利用节点json描述还原dom结构

    前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...

随机推荐

  1. 在Python 中怎么表示一个元素在一个list中的数量?

    commonest = [1,2,2,2,1,3,4,5,1,1] print(commonest.count(1))

  2. Contiguous Repainting

    题目描述 There are N squares aligned in a row. The i-th square from the left contains an integer ai. Ini ...

  3. mac下停止和启动mysql命令

    启动MySQL服务 sudo /usr/local/MYSQL/support-files/mysql.server start   停止MySQL服务 sudo /usr/local/mysql/s ...

  4. MySQL表与表的关系

    表与表的关系 一对多关系 ID name gender dep_name dep_desc 1 Chen male 教学部 教书育人 2 Old flying skin male 外交部 漂泊游荡 3 ...

  5. docker E: Unable to locate package nginx

    在使用docker容器时,有时候里边没有安装vim,敲vim命令时提示说:vim: command not found,这个时候就需要安装vim,可是当你敲apt-get install vim命令时 ...

  6. iOS高仿微信悬浮窗、忍者小猪游戏、音乐播放器、支付宝、今日头条布局滚动效果等源码

    iOS精选源码 iOS WKWebView的使用源码 模仿apple music 小播放器的交互实现 高仿微信的悬浮小窗口 iOS仿支付宝首页效果 [swift]仿微信悬浮窗 类似于今日头条,网易新闻 ...

  7. android高仿抖音、点餐界面、天气项目、自定义view指示、爬取美女图片等源码

    Android精选源码 一个爬取美女图片的app Android高仿抖音 android一个可以上拉下滑的Ui效果 android用shape方式实现样式源码 一款Android上的新浪微博第三方轻量 ...

  8. java中Redis5大基本类型的用法

    存储格式 基本用法 通过Jedis(封装了redis的Java客户端)对redis进行操作. Jedis工具类 public class JedisPoolUtil { private static ...

  9. SHELL用法四(for语句)

    1.SHELL编程For语句案例实战 1)For语句固定的语法格式: For i in (表达式) do 动作1 done 2)For语句案例操作一: #!/bin/bash do echo “$NU ...

  10. Android Studio调用系统隐藏接口EthernetManager

    google source签名文件参考:https://android.googlesource.com/platform/build/+/donut-release/target/product/s ...