html dom节点操作(获取/修改/添加或删除)

HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
HTML DOM Tree 实例

http://www.w3school.com.cn/i/ct_htmltree.gif

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

一：获取元素节点方法：

1.var node = document.getElementById("nodeId");

2.var nodelist = document.getElementsByClassName("nodeclassname");

3.var nodelist = document.getElementsByTagName("nodetagname");

二：获取到元素节点以后我们可以对他进行的操作：1.对自身的操作。2.对子节点的操作。3.对兄弟节点的操作。4.对父节点的操作

2.1. 删除自身：node.parentNode.removeChild(node);

2.2.判断是否有子节点：var boolean = node.hasChildNodes();

获取子节点列表：var childList = node.childNodes;

获取节点元素类型：var nodetype = node.nodeType; var nodename = node.nodeName;

删除子节点。node.removeChild(childNode);

在子节点尾部插入一个子节点:node.appendChild(childNode);

在子节点收不插入一个子节点:node.insertBefore(childNode);

用A节点替换B节点：node.replaceChild(A,B);

2.3.node.nextSibling获取相邻的下一个兄弟节点

node.previousSibling获取相邻的上一个兄弟节点

2.4 . 获取父节点node.parentNode

赞 (0)

相关推荐

  • javascript 获取HTML DOM父、子、临近节点

    在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i

  • DOM节点删除函数removeChild()用法实例

    本文实例讲述了DOM节点删除函数removeChild()用法.分享给大家供大家参考.具体分析如下: DOM删除一个节点,必须要站在父节点的高度去删除,代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  //思路:1.首先找到要删除的节点:2. 找到它的父节点,在父节点的角度删除子节点  var nodeul = document.getEleme

  • DOM节点深度克隆函数cloneNode()用法实例

    本文实例讲述了DOM节点深度克隆函数cloneNode()用法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  var nodeul = document.getElementsByTagName('ul')[0];//获取需要复制的UL节点  var newul = nodeul.cloneNode(true)

  • jQuery的DOM操作之删除节点示例

    jQuery的DOM操作之删除节点示例

    如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo

  • js中使用DOM复制（克隆）指定节点名数据到新的XML文件中的代码

    复制代码 代码如下: <?php /* <?xml version="1.0" encoding="utf-8"?> <article> <item> <title name="t1"></title> <content>content1</content> <pubdate>2009-10-11</pubdate> </ite

  • js和jquery对dom节点的操作(创建/追加)

    复制代码 代码如下: <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () { // var ha = '<p>a</p>'; // $('div').app

  • JS构建页面的DOM节点结构的实现代码

    JS构建页面的DOM节点结构的实现代码

    小提示: 关于数组的concat和push方法. 两者的区别主要有: concat是连接数组,不会修改原数组,返回值为连接后的数组,与push的重要区别是concat会展开数组的第一层子数组 push是添加数组元素.就地修改原数组,返回值为添加的新项,push不会展开传入的数组. 复制代码 代码如下: var a = [1,2,3,4]; var b = [4,5,6,7]; var c = a.push(b); var d = a.concat(b); console.log('a',a);

  • javascript dom操作之cloneNode文本节点克隆使用技巧

    true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全 false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本都有指向他的节点(文本节点) 当然有时候两者是可以通用的哦,如果要复制的节点没有任何的子节点,这是二者全等:比如 img... 为了让大家理解的更为深刻,举个小例子吧: 复制代码 代码如下: <div> <span>Shadow</span> |No Shadow

  • DOM节点的替换或修改函数replaceChild()用法实例

    本文实例讲述了DOM节点的替换或修改函数replaceChild()用法.分享给大家供大家参考.具体分析如下: DOM节点的替换过程: (1)创建新的节点: (2)找到旧的节点: (3)站在父节点的角度,使用replaceChild(新,旧)函数来替换. 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  //思路:1.首先找到要替换的节点:2. 创建一个新的

  • javascript获取dom的下一个节点方法

    javascript获取dom的下一个节点方法

    利用javascript 写一个在页面点击加减按钮实现数字的累加. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" value="+" onclick="jia(this)" /> <label class="num">0</label> <input type="button" value="-"

  • JavaScript DOM节点添加示例

    <!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">这是一个段落.</p> <p id="p2">这是另一个段落.</p> </div> <script> var para=document.createElement("h1"); var nod

随机推荐