HTML文档中一切都是节点！

　　　　整个文档是文档节点；

　　　　注释是注释节点；

　　　　每一个HTML元素都是一个元素节点；

　　　　元素内的文本内容是文本节点；

　　　　连元素的每一个属性都是一个属性节点。

　　　　看到这些是不是感觉很熟悉，没错，就像JS中一切都是对象一样，HTML文档中一切都是节点。

　   我们可以使用各种访问节点的方法，对任意一个节点进行增删改查等等操作。从而达到对整个页面的各种操作。

　　增：

　　　　如果要向HTML添加一个元素，需要先创建一个元素(元素节点)，然后再将其追加到已有的元素上。

　　　　创建元素节点newNode：

　　　　　　var newNode = document.createElement(String tagName)

　　　　创建元素内的文本节点：

　　　　　　var textNode = document.createTextNode(String data)

　　　　把文本节点textNode添加到新建的元素节点newNode上：

　　　　　　newNode.appendChild(textNode)

　　　　把新建的元素节点newNode添加到已存在的元素节oldNode点末尾：

　　　　　　oldNode.appendChild(newNode)

　　　　或者把新建的元素节点newNode添加到已存在的元素节点oldNode的某个子节点childNode前：

　　　　　　oldNode.insertBefore(newNode,childNode)

　　　　例子：

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="content-type" content="text/html; charset=utf-8" />

         <script src="jquery.js"></script>

         <script type="text/javascript">

             window.onload = function(){

                 var pp = document.createElement("li");

                 var hh1 = document.createElement("h1");

                 var ttext = document.createTextNode("这是新添加的元素节点!");

                 pp.appendChild(hh1);

                 hh1.appendChild(ttext);

                 var ull = document.getElementById("ul");

                 ull.appendChild(pp);

             }

         </script>

         <style type="text/css">

             ul {

                 border: 1px solid ;

                 margin: 100px auto;

                 width: 400px;

                 list-style-type: none;

             }

         </style>

         <title>JS</title>

     </head>

     <body>

         <ul id="ul">

             <li><h1>这是第一行！</h1></li>

             <li><h1>这是第二行！</h1></li>

         </ul>

     </body>

 </html>

　　效果：

　　

　　

　　删：

　　　　查找到将要删除的节点removeNode和该节点的父节点parentNode后

　　　　　　parentNode.removeChild(removeNode)

　　　　例子：

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="content-type" content="text/html; charset=utf-8" />

         <script src="jquery.js"></script>

         <script type="text/javascript">

             window.onload = function(){

                 var pp = document.createElement("li");

                 var hh1 = document.createElement("h1");

                 var ttext = document.createTextNode("这是新添加的元素节点!");

                 pp.appendChild(hh1);

                 hh1.appendChild(ttext);

                 var ull = document.getElementById("ul");

                 ull.appendChild(pp);

                 var li1 = document.getElementById("li1");

                 ull.removeChild(li1);

             }

         </script>

         <style type="text/css">

             ul {

                 border: 1px solid ;

                 margin: 100px auto;

                 width: 400px;

                 list-style-type: none;

             }

         </style>

         <title>JS</title>

     </head>

     <body>

         <ul id="ul">

             <li id="li1"><h1>这是第一行！</h1></li>

             <li><h1>这是第二行！</h1></li>

         </ul>

     </body>

 </html>　　

　　效果：

　　　　

　　改：
　　　　查找到某个需要改动的元素节点node，然后对其文本、样式等进行改动

　　　　改动其样式：

　　　　　　node.style.color="red"

　　　　改动其文本：

　　　　　　node.innerHTML="string"

　　　　实例：

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="content-type" content="text/html; charset=utf-8" />

         <script src="jquery.js"></script>

         <script type="text/javascript">

             window.onload = function(){

                 var pp = document.createElement("li");

                 var hh1 = document.createElement("h1");

                 var ttext = document.createTextNode("这是新添加的元素节点!");

                 pp.appendChild(hh1);

                 hh1.appendChild(ttext);

                 var ull = document.getElementById("ul");

                 ull.appendChild(pp);

                 var li1 = document.getElementById("li1");

                 ull.removeChild(li1);

                 var li2 = document.getElementById("li2");

                 li2.style.color="red";

                 li2.innerHTML="改变了颜色和文本的第二行！"

             }

         </script>

         <style type="text/css">

             ul {

                 border: 1px solid ;

                 margin: 100px auto;

                 width: 400px;

                 list-style-type: none;

             }

         </style>

         <title>JS</title>

     </head>

     <body>

         <ul id="ul">

             <li id="li1"><h1>这是第一行！</h1></li>

             <li id="li2"><h1>这是第二行！</h1></li>

         </ul>

     </body>

 </html>

　　效果：

　　

　　查:

　　　　我们除了应用getElementById()、getElementsByTagName()和getElementClassName()来获取特定的元素节点之余，我们还可以用getAttribute(String attribute) 来获取特定元素节点的某一个属性的值，并通过setAttribute(attrName,attrValue)来改变该属性的值。

　　　　实例：

 <script type="text/javascript">

             window.onload = function(){

                 var pp = document.createElement("li");

                 var hh1 = document.createElement("h1");

                 var ttext = document.createTextNode("这是新添加的元素节点!");

                 pp.appendChild(hh1);

                 hh1.appendChild(ttext);

                 var ull = document.getElementById("ul");

                 ull.appendChild(pp);

                 var li1 = document.getElementById("li1");

                 ull.removeChild(li1);

                 var li2 = document.getElementById("li2");

                 li2.style.color="red";

                 li2.innerHTML="改变了颜色和文本的第二行！"

                 alert(li2.getAttribute("style"));19             }

 </script>

　　效果：

　　

　　除此之外，我们还可以通过某个节点的nodeName、nodeType和nodeValue获取节点的更多信息：

　　nodeName属性规定节点的名称:　

    • nodeName 是只读的
    • 元素节点的 nodeName 与标签名相同
    • 属性节点的 nodeName 与属性名相同　　
    • 文本节点的 nodeName 始终是 #text
    • 文档节点的 nodeName 始终是 #document

　　　　注释：nodeName 始终包含 HTML 元素的大写字母标签名。

　　nodeValue 属性规定节点的值:

    • 元素节点的 nodeValue 是 undefined 或 null
    • 文本节点的 nodeValue 是文本本身
    • 属性节点的 nodeValue 是属性值

　　nodeValue 属性规定节点的值:

    • 元素节点的 nodeValue 是 undefined 或 null
    • 文本节点的 nodeValue 是文本本身
    • 属性节点的 nodeValue 是属性值

【Javascript】 DOM节点的更多相关文章

  1. javascript DOM 节点 第18节

    <html> <head> <title>DOM对象</title> </head><body><div >DOM对 ...

  2. JavaScript DOM–节点操作

    节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType  为1 属性节点 nodeType  为2 文本 ...

  3. JavaScript DOM节点和文档类型

    以下的例子以此HTML文档结构为例: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  4. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

  5. javascript DOM节点

    获得子节点方式: 1.将文本内容也当成节点 childNodes firstChild lastChild 2.获得标签为内容的节点 children firstElementChild lastEl ...

  6. JavaScript获取HTML DOM节点元素详解(转)

    在Web运用程序特别是Web 2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要处理的疑问. 51CTO推荐阅读:JavaScript DOM文档 ...

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

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

  8. JavaScript学习笔记（三）——留言板知操纵DOM节点

    用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...

  9. JavaScript操作DOM节点

    DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...

  10. JavaScript函数使用和DOM节点

    一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值, ...

随机推荐

  1. BZOJ 2038 小z的袜子（莫队）

    Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命……具体来说,小Z把这N只袜 ...

  2. 13、Semantic-UI之表格与表单

    13.1 定义基础样式表格   在HTML中可以通过table进行表格定义,在Semantic-UI中也可以通过class="ui table"定义表格. 示例:定义基础表格 &l ...

  3. 小试maven工程

    由于工作中要用到maven来进行开发j2ee开发,所以选用了集成maven的eclipse版本: 下载地址: https://www.eclipse.org/downloads/ 根据提示下载32或者 ...

  4. delphi实现截全屏功能

    procedure TForm1.Button10Click(Sender: TObject);var bmp: TBitmap; can: TCanvas; dc: HDC; Image1: TIm ...

  5. solr入门教程-较详细

    Solr调研总结 开发类型 全文检索相关开发 Solr版本 4.2 文件内容 本文介绍solr的功能使用及相关注意事项;主要包括以下内容:环境搭建及调试;两个核心配置文件介绍;维护索引;查询索引,和在 ...

  6. 安装MySQL提示：应用程序无法正常启动（0xc000007b）

    转:https://blog.csdn.net/zztingfeng/article/details/80155624 解决:在百度上下载DirectX修复工具(增强版),修复即可. 链接:http: ...

  7. DATEADD和DATEDIFF

    DateAdd函数 返回 返回包含一个日期的 Variant (Date),这一日期还加上了一段时间间隔. 语法 DateAdd(interval, number, date) DateAdd 函数语 ...

  8. 小修改,让mvc的验证锦上添点花(2)

    上一篇文章我们演示了通过对jquery.validate.unobtrusive.js做点小修改,如何给MVC的验证添点花 主要还是修改了onError与onSuccess中的这两个方法 这两个方法也 ...

  9. AJAX方式调用百度天气

    后台代码: [HttpPost] public string AjaxWeather() { string CityName = string.IsNullOrEmpty(Request.Form[& ...

  10. FTP ftp部署遇到问题

    FTP  ftp部署遇到问题 一. 二.