【Javascript】 DOM节点
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节点的更多相关文章
- javascript DOM 节点 第18节
<html> <head> <title>DOM对象</title> </head><body><div >DOM对 ...
- JavaScript DOM–节点操作
节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType 为1 属性节点 nodeType 为2 文本 ...
- JavaScript DOM节点和文档类型
以下的例子以此HTML文档结构为例: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- JavaScript DOM节点操作总结
节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...
- javascript DOM节点
获得子节点方式: 1.将文本内容也当成节点 childNodes firstChild lastChild 2.获得标签为内容的节点 children firstElementChild lastEl ...
- JavaScript获取HTML DOM节点元素详解(转)
在Web运用程序特别是Web 2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要处理的疑问. 51CTO推荐阅读:JavaScript DOM文档 ...
- Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...
- JavaScript学习笔记(三)——留言板知操纵DOM节点
用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
- JavaScript函数使用和DOM节点
一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值, ...
随机推荐
- Spring各个jar包详解
Spring各jar包详解 spring.jar 是包含有完整发布模块的单个jar 包.但是不包括mock.jar,aspects.jar, spring-portlet.jar, and sprin ...
- linux最基本命令
1.cd命令 这是一个非常基本,也是大家经常需要使用的命令,它用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径.如: cd /root/Docements # 切换到 ...
- Major OSL changes to catch up
flat_map optimization for runtime specialization: https://github.com/imageworks/OpenShadingLanguage/ ...
- 小程序:web-view采坑指南
最近负责开发的[广州医保查询]小程序已经发布上线,其中使用web-view组件完成的[在线绑定社保卡]核心流程,遇到了一些坑,现总结如下: 首先,让我们一起看看什么是web-view ? 小程序api ...
- jquery源码解析:jQuery静态属性对象support详解
jQuery.support是用功能检测的方法来检测浏览器是否支持某些功能.针对jQuery内部使用. 我们先来看一些源码: jQuery.support = (function( support ) ...
- UITabBarController的属性
viewControllers UIViewController的数组,即要显示的VC,数组中VC的顺序即是实际展示的VC的顺序.UITabBarController最多展示5个tab,如果数组中的元 ...
- windows下安装ubuntu15.04
本文主要介绍windows下安装ubuntu15.04,对与其他的版本也是适用的.现在要讲的是一种最简单ubuntu的安装方式. 1软件下载 1.磁盘分区工具DiskGenius 2.启动项修改工具E ...
- UVA-10929-You can say 11(秦九昭算法+同余与模算术)
原题链接 1000位大数取余: 秦九昭算法+同余与模算术: 1314 = (((1)*10+3)*10+1)*10+4 ( a + b ) % n = ( ( a % n ) + ( b % n ) ...
- (C/C++) 亂數應用
因為公司需要寫了一個亂數產生測試條件的小程式,再此紀錄下來 int _tmain(int argc, _TCHAR* argv[]) { fstream file; file.open("t ...
- git.exe 妙用
1.如果 window 上的命令行,在进行编译的不好使 可以尝试在git 中运行 2.运行 python 脚本 ,保持脚本一直执行(尤其是中间出错) 可以做一个 sh 文件,然后在git 中运行 #! ...