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 对象,从而 ...
随机推荐
- MAC终端密钥登录自动输入密码
升级MAC系统后,发现用于MAC终端ssh服务器的登录脚本无法正常执行了,表现为:需要手动输入密钥密码,于是重新整理一下,恢复正常,在此记录一下: #!/usr/bin/expect -fspawn ...
- 汉诺塔系列问题： 汉诺塔II、汉诺塔III、汉诺塔IV、汉诺塔V、汉诺塔VI
汉诺塔 汉诺塔II hdu1207: 先说汉若塔I(经典汉若塔问题),有三塔.A塔从小到大从上至下放有N个盘子.如今要搬到目标C上. 规则小的必需放在大的上面,每次搬一个.求最小步数. 这个问题简单, ...
- Spring HttpInvoker 从实战到源码追溯
Spring HttpInvoker 作为 Spring 家族中老牌远程调用模型,深受开发者喜爱. 其主要目的是来执行基于 HTTP 的远程调用(轻松穿越防火墙),并使用标准的 JDK 序列化机制. ...
- 基于R语言的时间序列指数模型
时间序列: (或称动态数列)是指将同一统计指标的数值按其发生的时间先后顺序排列而成的数列.时间序列分析的主要目的是根据已有的历史数据对未来进行预测.(百度百科) 主要考虑的因素: 1.长期趋势(Lon ...
- CentOS 7 使用 ACL 设置文件权限
Linux 系统标准的 ugo/rwx 集合并不允许为不同的用户配置不同的权限,所以 ACL 便被引入了进来,为的是为文件和目录定义更加详细的访问权限,而不仅仅是这些特别指定的特定权限. ACL 可 ...
- atitit 各分公司ceo cao行政经理职责.docx
1.1. 人员招募--分公司高层人员招募(每月招募四五人吧,每周一人平均) 1 1.2. 组织架构优化 1 1.3. 制度建设 健全并完善分公司内部管理机构设置,优化分公司业务管理流程: 1 1.4 ...
- 远程调试Android手机上网页的记录
1.手机需要开启USB调试模式: 2.电脑和手机上都要安装最新的Chrome浏览器: 3.手机连接电脑,会出现下载安装驱动的提示并安装成功(并不是所有的手机都会这么顺利,比如我的魅族就无法安装驱动,公 ...
- Convolution卷积算法python以numpy，Matplotlib实现
1:简述 Numpy拥有函数numpy.convolve(a, v, mode='full')[source]¶,通过该函数完成卷积算法并图形化(Matplotlib)实现. 2:卷积定理 原理: 设 ...
- js快速排序算法
真正的快速排序算法一: function quickSort(array){ function sort(prev, numsize){ var nonius = prev; var j = nums ...
- const的位置问题
来源:牛客网 下列哪两个是等同的 int b; 1.const int *a = &b; 2.const * int a = &b; 3.const int* const a = &a ...