Node的三个基本属性:

  1.nodeType:表明节点类型,1是元素节点,3是文本节点。

  2.nodeName:  表明节点名称,元素节点为标签名,文本节点为#text。

  3.nodeValue:表明节点值,元素节点为null,文本节点为文本内容。

Node的节点关系:

  1.parentNode与childNodes

    parentNode寻找当前节点的父节点,childNodes寻找当前节点的子节点,其中包括文本节点和元素节点(特别需要注意空白的文本节点也算是节点)如下程序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>childNodes.length</title>
</head>
<body>
<ul id="ul">
<li></li>
<li></li>
<li></li>
</ul>
<script>
var oUl=document.getElementById('ul');
alert(oUl.childNodes.length);//是7不是3
</script>
</body>
</html>

  2:firstChild与lastChild

    分别对应父节点的第一个节点与最后一个节点,firstChild相当于childNodes[0]或childNodes.item(0)。

  3.nextSibling与previousSibling

    分别对应当前节点的前一个节点与当前元素的后一个节点。

Node的操作节点:

  Node的操作节点有appendChild(),insertBefore(),replaceChild(),removeChild(),cloneNode(),normalize()

  1.appendChild(newNode)是将newNode添加到当前节点的最后一个子节点的后面,如果newNode已经是文档的一部分,则appendChild操作相当于剪切;若果newNode是新创造的节点,则appendChild操作相当于添加。

  2.insertBefore(newNode,oldNode)是将newNode添加到当前节点的oldNode子节点的前面,如果insertBefore(newNode,null),则insertBefore()的操作和appendChild()一样。

  3.replaceChild(newNode,oldNode)是将oldNode替换为newNode,不过oldNode的所有关系指针newNode也都继承下来。

  4.removeChild(oldNode)是删除oldNode节点。

  5.cloneNode(true/false)是将已知节点复制一份,如果为true,包括子节点,若果为false,不包括子节点。然后通过appendChild(),insertBefore(),replaceChild()将其添加到文档中。

  6.normalize()是将空文本节点删除或将相邻的文本节点合并为一个文本节点。

JS中Node节点总结的更多相关文章

  1. js中DOM 节点的一些操作方法

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

  2. js中的节点遍历+类数组对象

    firstChild  第一个子元素 lastChild  最后一个子元素 childNodes[n]  =   childNodes.item(n)    第n+1个子元素 parentNode  ...

  3. 原生JS中DOM节点相关API合集

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  4. js中属性节点的应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. JS中插入节点的方法appendChild和insertBefore的应用

    1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点.比如:appendChild(newchild)括号里可以是创建的标签var newchild = document. ...

  6. JS中Text节点总结

    文本节点有Text类型表示,包含的是可以找字面解释的纯文本内容.纯文本中可以包含转移后的HTML字符,但不能包含HTML代码.Text节点具有以下属性: 1.nodeType的值为3. 2.nodeN ...

  7. JS中Document节点总结

    document对象是documentHTML的一个实例,也是window对象的一个属性,因此可以将document对象作为一个全局对象来访问. Document节点的子节点可以是DocumentTy ...

  8. js中对节点属性的操作和对节点的操作

    常用的节点属性操作方法 1.setAttribute(name,value):给某个节点添加一个属性 2.getAttribute(name):获取某个节点属性的值. 3.removeAttribut ...

  9. Kubernetes容器集群管理环境 - Node节点的移除与加入

    一.如何从Kubernetes集群中移除Node比如从集群中移除k8s-node03这个Node节点,做法如下: 1)先在master节点查看Node情况 [root@k8s-master01 ~]# ...

随机推荐

  1. 线段树 poj 3468

    Description You have N integers, A1, A2, ... ,AN. You need to deal with two kinds of operations. One ...

  2. druid 搭建集群环境

    下载druid 下载地址 http://static.druid.io/artifacts/releases/druid-services-0.6.145-bin.tar.gz 解压 tar -zxv ...

  3. 论.net平台的切身感触(惑)

    这篇博客只是作者客观看法,不喜勿喷,条条大路通罗马,路不同风景也不一样,接下来的路该怎么走? 简介:作者.net程序员一枚,工作已有四年,接触过.net平台winform,webform,mvc的开发 ...

  4. 获取camera截屏图片

    Camera camera; SpriteRenderer sprRender; Texture2D t2d = New Texture2D(1300, 760, TextureFormat.RGB2 ...

  5. CF Manthan, Codefest 16 G. Yash And Trees 线段树+bitset

    题目链接:http://codeforces.com/problemset/problem/633/G 大意是一棵树两种操作,第一种是某一节点子树所有值+v,第二种问子树中节点模m出现了多少种m以内的 ...

  6. 需求收集过程实例之 - GF Phase 1

    正统的需求过程是怎样呢?各位看客有兴趣可以问问google 百度.本人的体会是理论很清晰,现实很混沌.这篇随笔讲述的是我参与的几个项目的需求收集过程.有的很顺利,有的却是乱中求生.但是不管怎样,最终这 ...

  7. C#,VB.NET如何将Word转换为PDF和Text

    众所周知,Word是我们日常工作中常用的办公软件之一,有时出于某种需求我们需要将Word文档转换为PDF以及Text.那么如何以C#,VB.NET编程的方式来实现这一功能呢? 下面我将分开介绍如何运用 ...

  8. 【代码学习】GD库中添加图片水印

    函数 getimagesize() bool imagecopymerge( resource dst_im, resource src_im, int dst_x, int dst_y, int s ...

  9. vector实现最大流EK算法

    序: 在之前的文章中实现了不利用STL实现EK算法,效率也较高.这次我们企图简化代码,减少变量的使用与手写模拟的代码. 注意:vector等STL的container在不开O2优化的时候实现同一个效果 ...

  10. linux下fdisk分区管理、文件系统管理、挂载文件系统等

    分区管理工具有:fdisk, parted, sfdisk fdisk:对于一块硬盘来讲,最多只能管理15分区: # fdisk -l [-u] [device...]  查看硬盘设备分区信息 # f ...