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. Django进阶(转载)

    Django进阶地址 来自为知笔记(Wiz)

  2. ExtJS浏览器对象模型BOM——命名空间和用户代理对象、Cookie

    BOM(浏览器对象模型(BrowserObjectModel)),允许访问和操控浏览器窗口.研发者通过使用BOM,可移动窗口.更改状态栏文本.执行其它不与页面内容发生直接联系的操作. 本文将从ExtJ ...

  3. UVA 10881

    题目就不再写了,直接开始 [分析]蚂蚁碰撞掉头,其实不用考虑掉头问题,直接让“掉头”等价于“对穿而过”, 然后调换它们的状态(感觉像是障眼法hhh),只要分清楚“谁是谁”.因为“掉头”,所以蚂蚁 的相 ...

  4. 状压DP学习笔记

    有的时候,我们会发现一些问题的状态很难直接用几个数表示,这个时候我们就会用到状压dp啦~~. 状压就是状态压缩,就是讲原本复杂难以描述的状态用一个数或者几个数来表示qwq.状态压缩是一个很常用的技巧, ...

  5. composer手动安装到windows

    1.配置系统变量 Path 计算机->高级系统设置->环境变量->找到系统变量Path  双击 加入  ;php根目录地址:php中ext地址    如 :“;D:\phpStudy ...

  6. 关于logstash-out-mongodb插件说明

    从kafka获取数据,存到mongodb中.适合空间查询geo_point设置.配置文件如下: input {  kafka {    type => "test"    a ...

  7. [ActionScript 3.0] 嵌入字体

    首先我们要生成一个swf的字体库,以微软雅黑为例,新建YaHei_font.fla,ctrl+L,在库面板中右键→新建字型,弹出字体元件属性窗口,选择要嵌入的字体, 并选择为ActionScript ...

  8. jqury动画,循环

    一.动画 效果就是定义一个小盒子,让这个小盒子以动画的形式变化尺寸, <!DOCTYPE html> <html lang="en"> <head&g ...

  9. 【智能算法】粒子群算法(Particle Swarm Optimization)超详细解析+入门代码实例讲解

    喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 01 算法起源 粒子群优化算法(PSO)是一种进化计算技术(evolutionary computation),1995 年由E ...

  10. mysql5.7解压版版安装步骤详情

    mysql有安装版和解压版之分: 安装版:以msi结尾的,这种版本优点是安装便捷,全是傻瓜式的下一步:缺点是会不自觉的安装一些我们根本不需要的组件. 解压版:以zip或者其他压缩格式结尾的,这种版本虽 ...