10、DOM（文档对象模型）
1、认识DOM
html 骨架
css 装修
javascript 物业
DOM 打破上述三者的通道。
【注】script标签一般情况下要写在head标签。
<div id = "div1">div文本</div>
1、标签 元素节点对象
<div></div>
2、id = "div1" 属性节点对象
3、div文本 文本节点对象
【注】元素节点对象应该如何在js中被找到。
window.onload
当页面加载完成以后，去执行的函数。
document.getElementById();
window.onload = function(){
var oDiv = document.getElementById("div1");
alert(oDiv);
}
2、node.getElementsByTagName()
document.getElementsByTagName()
格式：node.getElementsByTagName()
++功能：从node这个节点开始，找node子节点中符合标签名的所有元素++。
参数：标签名字
返回值：查找到所有符合这个标签名的所有元素节点。使用的时候，类似于数组。
<script>
window.onload = function(){
/*var aDivs = document.getElementsByTagName("div");
//aDivs使用起来和数组类似。
alert(aDivs.length);*/
/*var aBtns = document.getElementsByTagName("button");
for(var i = 0; i < aBtns.length; i++){
aBtns[i].onclick = function(){
alert(123);
}
}*/
/*
找到div1，找到div1下的button
*/
var oDiv = document.getElementById("div1");
var aBtns = oDiv.getElementsByTagName("button");
for(var i = 0; i < aBtns.length; i++){
aBtns[i].onclick = function(){
alert(123);
}
}
}
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div id = "div1">
<button>按钮4</button>
<button>按钮5</button>
</div>
</body>
3、node.getElementsByClassName()
【注】IE8以下不兼容。
node.getElementsByClassName()
参数：class的名字
返回值：找到从node节点开始，node子节点中，所有符合条件的元素。
document 代表 <html></html>
<style>
.red{
background-color: red;
}
div{
width: 100px;
height: 100px;
margin: 30px;
background-color: black;
}
</style>
<script>
/*
【注】IE8以下不兼容。
node.getElementsByClassName()
参数：class的名字
返回值：找到从node节点开始，node子节点中，所有符合条件的元素。
document 代表 <html></html>
*/
window.onload = function(){
// var nodes = document.getElementsByClassName("red");
var oDiv = document.getElementById("div1");
var nodes = oDiv.getElementsByClassName("red");
// alert(nodes.length);
for(var i = 0; i < nodes.length; i++){
nodes[i].style.backgroundColor = "blue";
}
}
</script>
<body>
<div></div>
<div class = "red"></div>
<div></div>
<div class = "red"></div>
<div></div>
<div id = "div1">
<span class = "red">文本</span>
<button class = "red">按钮</button>
</div>
</body>
4、document.getElementsByName(name)
document.getElementsByName();
1、只能从document开始去查
2、参数：name的值，
3、返回值：通过name的值查找到的所有符合条件的元素。
【注】name属性一般情况，使用在form表单元素中，其他标签就不要去用了。
获取元素节点的方法
1、document.getElementById(id)
2、node.getElementsByTagName(tagName)
3、node.getElementsByClassName(className)
IE8以下不兼容
4、document.getElementsByName(name)
<script>
window.onload = function(){
/*
*/
var nodes = document.getElementsByName("hello");
alert(nodes.length);
}
</script>
</head>
<body>
<div name = "hello"></div>
<span name = "hello"></span>
<input type="text" name = "hello">
<textarea name="hello" id="" cols="30" rows="10"></textarea>
</body>
5、元素节点的属性
元素节点 === 标签
1、tagName 当前元素节点的标签名
2、innerHTML 标签间的内容
window.onload = function(){
var oDiv = document.getElementById("div1");
// alert(oDiv.tagName);
//获取
// alert(oDiv.innerHTML);
//设置 innerHTML中如果有标签，会解析
oDiv.innerHTML = "<strong>粗体文本</strong>"
}
访问属性
//alert(oDiv.id);
//alert(oDiv.title);
//alert(oDiv.className);
// alert(oDiv.style); //返回的是一个css样式对象
// alert(oDiv.style.width);
// alert(oDiv.style.height);
++对于带-的样式，要将-去掉，然后后续单词的首字母大写。++
//++alert(oDiv.style.backgroundColor);++
oDiv.title = "world";
oDiv.className = "box2";
oDiv.style.backgroundColor = "blue";
6、随机颜色
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: red
}
</style>
<script>
/*
rgba(255, 255, 255,1);
1位十六进制 == 四位二进制
红 两位 == 8位
parseInt(Math.random() * 256) [0,1)
*/
function randomColor(){
var str = "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ",1)";
return str;
}
window.onload = function(){
var oDiv = document.getElementById("div1");
var i = 15;
setInterval(function(){
oDiv.style.backgroundColor = randomColor();
oDiv.style.fontSize = i++ + "px";
}, 100);
}
</script>
<body>
<div id = "div1">
清醒吧
</div>
</body>
7、自定义获取元素节点
<script>
function elementsByClassName(node, className){
var nodes = node.getElementsByTagName("*");
var nodeArr = [];
//2、通过循环，找出class = box的节点
for(var i = 0; i < nodes.length; i++){
if(nodes[i].className == className){
nodeArr.push(nodes[i]);
}
}
return nodeArr;
}
window.onload = function(){
var oDiv = document.getElementById("div1");
var nodes = elementsByClassName(oDiv, "box");
alert(nodes.length);
alert(nodes[1].tagName);
}
</script>
<body>
<div id = "div1">
<span class = "box">span</span>
<button class = "box">button1</button>
<button>button2</button>
</div>
<div class = "box">div</div>
</body>
8、练习
写一个定时器,每个一秒修改一次div内文本颜色和文字大小.
最开始这个文字是默认大小,大小开始增大,当增大了6次以后,
文字大小开始缩小,缩小6次,文字再开始增大。
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
var i = 1; //代表一共变化了多少次字体大小。
var speed = 10; //字体大小变化的速度。
setInterval(function(){
//颜色随机方法在上面
oDiv.style.color = randomColor();
//1、获取当前的字体大小
var currentFontSize = parseInt(oDiv.style.fontSize);
//2、累加
oDiv.style.fontSize = currentFontSize + speed + "px";
if(i % 6 == 0){
speed *= -1;
}
i++;
}, 100);
}
</script>
</head>
<body>
<div id = "div1" style = "font-size: 18px">
我是要变化的文本
</div>
</body>
9、总结，获取元素
<style>
/*选择器*/
#div1{
width: 100px;
height: 100px;
}
.box{
background-color: red
}
div{
border: 1px solid black;
}
</style>
<script>
/*
document.getElementById();
node.getElementsByTagName();
node.getElementsByClassName();
document.getElementsByName();
*/
/*
封装函数
#id 通过id获取元素
.class 通过class获取元素
tagName 通过tagName获取元素
name=xxx通过name获取元素
*/
function $(vArg){
switch(vArg[0]){
case "#"://id
return document.getElementById(vArg.substring(1));
break;
case "."://class
return elementsByClassName(document, vArg.substring(1));
break;
default:
var subStr = vArg.substring(0, 5);
if(subStr == "name="){
//name
return document.getElementsByName(vArg.substring(5));
}else{
//tagName
return document.getElementsByTagName(vArg);
}
break;
}
}
function elementsByClassName(node, className){
var nodes = node.getElementsByTagName("*");
var nodeArr = [];
//2、通过循环，找出class = box的节点
for(var i = 0; i < nodes.length; i++){
if(nodes[i].className == className){
nodeArr.push(nodes[i]);
}
}
return nodeArr;
}
window.onload = function(){
//id = div1
// alert($("#div1").id);
//class = "box"
// alert($(".box").length);
// alert($(".box")[2].tagName);
//name='hello'
// alert($("name=hello").length);
//tagName
alert($("li").length);
}
</script>
<body>
<div id = "div1" class = "box"></div>
<span class = "box">span</span>
<ul>
<li>1</li>
<li>2</li>
<li class = "box">3</li>
</ul>
<input type="text" name = "hello" />
<textarea name="hello" id="" cols="30" rows="10"></textarea>
</body>
10、Attribute
设置属性
setAttribute()
格式：元素节点.setAttribute(key, value);
获取属性
getAttribute();
格式：元素节点.getAttribute(key)
删除属性
removeAttribute();
格式：元素节点.removeAttribute(key)
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
//获取属性
// alert(oDiv.title);
// alert(oDiv.getAttribute("title"));
// oDiv.title = "world";
// oDiv.setAttibute("title", "world");
/*
1、class
*/
/*alert(oDiv.className);
oDiv.className = "box2";*/
/*alert(oDiv.getAttribute("class"));
oDiv.setAttribute("class", "xxx");*/
/*
2、自定义属性
*/
// alert(oDiv.xxx);
// alert(oDiv.getAttribute("xxx"));
// oDiv.xxx = "yyy";
//oDiv.setAttribute("xxx", "yyy");
/*
3、removeAttribute()
*/
// oDiv.className = "";
oDiv.removeAttribute("class");
}
</script>
<body>
<div id = "div1" title = "hello" class = "box"></div>
</body>
11、节点属性
三种：
++1、元素节点++
<div></div>
++2、属性节点 id = "div1"
3、文本节点 div文本 通过元素节点的子节点找到的。++
元素节点的属性：
childNodes
firstChild
lastChild
**【注】只获取子节点中的元素节点 **
children
firstElementChild
lastElementChild
parentNode 当前节点的父节点
previousSibling 找出当前节点的兄弟节点中上一个节点
nextSibling 找出当前节点的兄弟节点中下一个节点
window.onload = function(){
var oDiv = document.getElementById("div1");
// alert(oDiv.childNodes.length);
/*alert(oDiv.childNodes[0]);
alert(oDiv.childNodes[1]);*/
alert(oDiv.firstChild);
alert(oDiv.lastChild);
}
window.onload = function(){
var oDiv = document.getElementById("div1");
// alert(oDiv.childNodes.length); //5
// alert(oDiv.childNodes[0]);
// alert(oDiv.children.length);
/*alert(oDiv.children[0]);
alert(oDiv.children[1]);*/
/*alert(oDiv.firstElementChild.tagName);
alert(oDiv.lastElementChild.tagName);*/
// alert(oDiv.parentNode.tagName);
// alert(oDiv.previousSibling);
alert(oDiv.nextSibling)
}
/*
如何忽略空白节点
*/
</script>
<body>
<strong>strong2</strong>
<div id = "div1">
<strong>strong</strong>
div文本
<span>span</span>
xxxx
</div>
<h1>h1</h1>
</body>
12、节点属性
++元素节点
文本节点
属性节点++ 都有:
nodeName nodeType nodeValue
节点属性
window.onload = function(){
var oDiv = document.getElementById("div1");
/*alert(oDiv.nodeName);
alert(oDiv.nodeType);
alert(oDiv.nodeValue);*/
alert(oDiv.firstChild.nodeName); //#text
alert(oDiv.firstChild.nodeType); //3
alert(oDiv.firstChild.nodeValue); //
}
13、忽略空白节点方法
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
/*
文本节点
nodeName #text
nodeType 3
nodeValue 文本的值
*/
alert(oDiv.childNodes.length);
// alert("|" + oDiv.firstChild.nodeValue + "|");
//字符串中的\n代表换行 \r进纸字符
/*var str = " \n ";
var res = /^\s+$/.test(str);
alert(res);*/
filterSpaceNode(oDiv);
alert(oDiv.childNodes.length);
alert(oDiv.childNodes[0].tagName);
alert(oDiv.childNodes[1].nodeValue);
}
/*
匹配纯空白字符串(包含空格，回车，tab，换行)
正则表达式
/^\s+$/.test() 是纯空白，返回true，否则，返回false
*/
function filterSpaceNode(node){
var nodes = node.childNodes;
//通过循环找到所有的空白节点
for(var i = 0; i < nodes.length; i++){
if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
//肯定是空白
//将这个空白节点删除。
node.removeChild(nodes[i]);
}
}
}
</script>
</head>
<body>
<div id = "div1">
<strong>strong</strong>
文本
<h1>h1</h1>
</div>
</body>
14、属性节点
元素节点
文本节点 : 元素节点的子节点
属性节点
节点属性
<script>
/*
元素节点
文本节点 元素节点的子节点
属性节点
*/
window.onload = function(){
/*
attributes 获取当前元素节点所有属性节点
*/
var oDiv = document.getElementById("div1");
// alert(oDiv.attributes.length);
//oDiv.attributes.getNamedItem(key)
//object Attr
/*
nodeName 该属性节点的属性名
nodeType 2
nodeValue 该属性节点的值
*/
getNamedItem() 方法返回节点列表中指定属性名的值。
// alert(oDiv.attributes.getNamedItem("id"));
/*alert(oDiv.attributes.getNamedItem("id").nodeName);
alert(oDiv.attributes.getNamedItem("id").nodeType);
alert(oDiv.attributes.getNamedItem("id").nodeValue);*/
/*alert(oDiv.attributes["id"].nodeName);
alert(oDiv.attributes["id"].nodeType);
alert(oDiv.attributes["id"].nodeValue);*/
//object NamedNodeMap 集合
/*
集合：
1、不重复
2、无序
*/
}
</script>
</head>
<body>
<div class = "box" title = "hello" name = "world" id = "div1"></div>
</body>
15、createElement
document.write在写入内容的时候，会将原有的内容覆盖掉
document.createElement(标签名);
++返回值：创建好的该标签对象++
document.createTextNode()
功能：创建文本节点
DOM节点操作
<script>
function btnClick(){
//有一个span节点
//创建一个span节点
/*
document.createElement(标签名);
返回值：创建好的该标签对象
*/
var oDiv = document.getElementById("div1");
var oSpan = document.createElement("span");
//给span节点填充文本
/*
document.createTextNode()
功能：创建文本节点
*/
/*var oTxt = document.createTextNode("span的内容");
oSpan.appendChild(oTxt);*/
oSpan.innerHTML = "span的内容";
/*
node1.appendChild(node2)
功能：将node2插入到node1的子节点内，并且，是子节点的末尾。
*/
oDiv.appendChild(oSpan);
}
</script>
</head>
<body>
<button onclick = "btnClick();">按钮</button>
<div id = "div1">
<strong>strong</strong>
<h1>h1</h1>
</div>
</body>
16、insertBefore
<script>
function btnClick(){
/*
insertBefore()
格式：父节点.insertBefore(node1, node2)
功能：将node1节点插入到node2节点的前面
*/
var oStrong = document.createElement("strong");
var oDiv2 = document.getElementById("div2");
var oDiv1 = document.getElementById("div1")
// oDiv2.parentNode.insertBefore(oStrong, oDiv2);
oDiv2.appendChild(oStrong);
setTimeout(function(){
oDiv1.appendChild(oStrong);
}, 4000);
}
//node1插入到node2的后面
function insertAfter(node1, node2){
//1、node2后面还有别的元素
//2、node2已经是最后一个了，直接插入到
if(node2 == node2.parentNode.lastChild){
node2.parentNode.appendChild(node1);
}else{
node2.parentNode.insertBefore(node1, node2.nextSibling);
}
}
</script>
</head>
<body>
<button onclick = "btnClick();">按钮</button>
<div id = "div2"></div>
<div id = "div1"></div>
</body>
17、节点操作
<script>
function btnClick(){
/*
replaceChild()
格式：父节点.replaceChild(node1, node2);
功能：用node1替换node2
*/
/*var oSpan = document.createElement("span");
var oDiv = document.getElementById("div1");
oDiv.parentNode.replaceChild(oSpan, oDiv);*/
/*
cloneNode()
参数：true/false 如果true，将该标签和标签间内容，全部克隆
返回值：新克隆好的元素节点
*/
/*var oDiv = document.getElementById("div1")
var newNode = oDiv.cloneNode(true);
document.body.appendChild(newNode);*/
/*
removeChild()
格式：parentNode.removeChild(node)
功能：删除node这个节点
*/
var oDiv = document.getElementById("div1")
oDiv.parentNode.removeChild(oDiv);
}
</script>
</head>
<body>
<button onclick = "btnClick();">按钮</button>
<div id = "div1">div1</div>
</body>
10、DOM（文档对象模型）的更多相关文章
- javascript之DOM文档对象模型编程的引入
/* DOM(Document Object Model) 文档对象模型 一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的 对象进行描述,我们在浏览器上看 ...
- JavaScript（三、DOM文档对象模型）
一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: &q ...
- html--JavaScript之DOM (文档对象模型)
一.简介 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标 ...
- DOM文档对象模型简介
DOM简介 DOM是W3C(万维网联盟)的标准 "W3C文档对象模型DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构.样式".W3C DOM ...
- dom文档对象模型图
- 文档对象模型 DOM
1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...
- JavaScript交互式网页设计 • 【第4章 JavaScript文档对象模型】
全部章节 >>>> 本章目录 4.1 文档对象模型简介及属性 4.1.1 文档对象模型概述 4.1.3 实践练习 4.2 document 对象查找 HTML 元素 4.2 ...
- HTML DOM （文档对象模型）
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过可编程的对象模型,JavaScrip ...
- JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
- (84)Wangdao.com第十八天_JavaScript 文档对象模型 DOM
文档对象模型 DOM DOM 是 JavaScript 操作网页的接口, 全称为“文档对象模型”(Document Object Model). 作用是将网页转为一个 JavaScript 对象,从而 ...
随机推荐
- [DevExpress使用随笔]之NavBarControl控件（一）【转】
https://blog.csdn.net/HXC_HUANG/article/details/78614092 NavBarControl是具有可扩展组的侧导航控件.一.在Winform窗口中拖入N ...
- tensorflow创建自定义 Estimator
https://www.tensorflow.org/guide/custom_estimators?hl=zh-cn 创建自定义 Estimator 本文档介绍了自定义 Estimator.具体而言 ...
- [转] 阿里研究员谷朴：API 设计最佳实践的思考
API是软件系统的核心,而软件系统的复杂度Complexity是大规模软件系统能否成功最重要的因素.但复杂度Complexity并非某一个单独的问题能完全败坏的,而是在系统设计尤其是API设计层面很多 ...
- 找不到指定的 VM 安装:类型 标准 VM,名称 jre7
问题背景是这样 原来使用的是jre7.0.55,后来为了安装使用 layabox IDE ,然后装了jdk_8u144 之后需要切换环境变量 之后java项目调试的时候重新设置了jdk,没问题. 直到 ...
- Windows系统下安装zabbix客户端
简单介绍如何在windows系统下安装zabbix客户端 1. 首先下载和zabbix服务端大版本相同的windows客户端 例如我服务端安装的是zabbix-3.4.14.tar.gz ...
- Atitit s2018.6 s6 doc list on com pc.docx Atitit s2018.6 s6 doc list on com pc.docx Aitit algo fix 算法系列补充.docx Atiitt 兼容性提示的艺术 attilax总结.docx Atitit 应用程序容器化总结 v2 s66.docx Atitit file cms api
Atitit s2018.6 s6 doc list on com pc.docx Atitit s2018.6 s6 doc list on com pc.docx Aitit algo fi ...
- 物联网架构成长之路(30)-Spring Boot Admin微服务WebUI监控
0. 前言 一个完整的微服务解决方案包含了许多微服务,基于我们需要观察各个微服务的运行状态,因此Spring Boot 生态提供了Spring Boot Admin 这个组件来实现微服务管理WEB U ...
- 物联网架构成长之路(28)-Docker练习之MQ中间件(Kafka)
0. 前言 消息队列MQ,这个在一般的系统上都是会用到的一个中间件,我选择Kafka作为练手的一个中间件,Kafka依赖Zookeeper.Zookeeper安装上一篇博客已经介绍过了. 1. Kaf ...
- CentOS5.9 编译Emacs 24
从Emacs官方网站下载最新版解压后,执行 ./configure 得到错误信息: configure: error: The following required libraries were no ...
- Visual Studio 2015 msvsmon.exe crashed when c++ debugging with x64
Completely uninstalling Astrill fixed the issue but this solution is not what I want. Astrill suppor ...