JavaScript(2)---DOM详解
JavaScript(2)---DOM详解
1、DOM概念
什么是DOMjavascript
DOM全称为文本对象模型(Document Object Model),它定义了全部HTML元素的对象和属性，以及访问他们的方法。它的主要做用包括：html
改变HTML 元素 , 改变HTML属性 , 改变CSS 样式，对页面中的全部事件作出反应。前端
一、DOM 节点树
概念 DOM模型将整个HTML文档当作一个树形结构，并用document对象表示该文档，树的每一个子节点表示HTM档中的不一样内容。java
如图node
上图对应的html代码以下数组
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<h1>小小</h1>
<a href="www.xx.com">连接</a>
</body>
</html>
经过这幅图也能够看出节点树中有如下几种关系app
一、父级关系（图中 html 是 head 的父亲,head是title的父亲。） 二、子级关系（图中 head 是 html 的儿子,title是head的儿子。） 三、兄弟关系 （图中 head 和 body是兄弟关系。p 和 h1 是兄弟关系。）
二、DOM 节点类型
从上图部分，我用四种颜色区分了不一样节点的类型,每一个节点对应的nodeType也是不一致的。dom
三、DOM 节点操做
节点查询操做函数
节点增删操做学习
节点属性操做
2、查询示例
这里经过举例去更好的理解上面的一些操做。
一、查询子元素
children : 能够获取当前元素的全部子元素，它是不包含空白的。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="father">
<p>今天时间</p>
<p>2019.12.09</p>
<p>22:15分</p>
</div>
</body>
<script>
window.onload = function () {
var father = document.getElementById("father");
var all = father.children; // 获取 father 下边全部的子元素
console.log("数组的长度为:" + all.length);
};
</script>
</html>
输出
数组的长度为:3
二、查询父元素
parentNode ：获取当前元素的父节点(父元素)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="father">
<p id="childNode">我是子节点</p>
</div>
</body>
<script>
window.onload = function () {
var p = document.getElementById("childNode"); //获取p元素
var parent = p.parentNode; // 获取父元素
console.log(parent);
};
</script>
</html>
输出
<div id="father">
<p id="childNode">我是子节点</p>
</div>
三、查询兄弟元素
previousElementSibling 获取当前元素的前一个兄弟元素(哥哥元素)
nextElementSibling 获取当前元素的后一个兄弟元素(弟弟元素)
示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id="previous" name="1111">哥哥元素</p>
<p id="my">本元素</p>
<p id="next">弟弟元素</p>
</body>
<script>
window.onload = function () {
var my = document.getElementById("my"); // 获取个人元素
var previous = my.previousElementSibling; // 获取哥哥元素
var next = my.nextElementSibling; // 获取弟弟元素
console.log(previous);
console.log("---------------------");
console.log(next);
};
</script>
</html>
输出
<p id="previous" name="1111">哥哥节点</p> --------------------- <p id="next">弟弟节点</p>
3、增删改示例
一、增长子节点
appendChild() : 向一个父节点中添加一个新的子节点 父节点.appendChild(子节点);
代码示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script>
window.onload = function () {
// 获取到 btn
var btn01 = document.getElementById("btn");
// 添加点击事件
btn01.onclick = function () {
// 建立一个 p 标签
var p = document.createElement("p");
// 建立一个文本节点
var txt = document.createTextNode("我是新建立p标签中的内容...");
// 把文本节点添加到 p 标签中
p.appendChild(txt);
// 把 p 标签添加到 body 中
var body = document.body; // 获取body
body.appendChild(p);
};
};
</script>
<body>
<button id="btn">建立一个p标签</button>
</body>
</html>
运行
二、移除子节点
removeChild() ：删除一个子节点 父节点.removeChild(子节点);
代码示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn">删除一个子节点</button>
<ul id="uls">
<li>我是第一个子节点</li>
<li>我是第二个子节点</li>
<li>我是第三个子节点</li>
<li>我是第四个子节点</li>
</ul>
</body>
<script>
window.onload = function () {
// 获取到 btn
var btn = document.getElementById("btn");
// 添加点击事件,删除第三个子节点
btn.onclick = function () {
//获取第三个子节点
var node = document.getElementsByTagName("li")[2];
// 获取父节点
var ul = document.getElementById("uls");
ul.removeChild(node); // 删除子节点
};
};
</script>
</html>
运行
三、替换子节点
replaceChild() : 可使用指定的子节点来替换已有的子节点 父节点.replaceChild(新节点,旧节点);
代码示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn">替换按钮</button>
<p id="pNode">我是旧节点 p </p>
</body>
<script>
window.onload = function () {
// 获取到 btn01
var btn = document.getElementById("btn");
// 添加点击事件
btn.onclick = function () {
// 获取p标签
var p = document.getElementById("pNode");
// 获取父节点
var body = document.body;
//建立一个新的节点，用于替换旧节点
var a = document.createElement("a");
var txt = document.createTextNode("我是新的节点 a 哦~");
a.appendChild(txt);
// 替换节点
body.replaceChild(a, p);
};
};
</script>
</html>
运行
四、替换指定位置节点
insertBefore() : 能够在指定的子节点前插入一个新的子节点 父节点.insertBefore(新节点,旧节点);
代码示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn01">替换子节点</button>
<p id="pNode">我是旧节点 p </p>
</body>
<script>
window.onload = function () {
// 获取到 btn01
var btn01 = document.getElementById("btn01");
// 添加点击事件
btn01.onclick = function () {
// 获取p标签
var p = document.getElementById("pNode");
// 获取父节点
var body = document.body;
//建立一个新的节点，用于插入到 p 元素前面
var a = document.createElement("a");
var txt = document.createTextNode("我是新的节点 a 哦~");
a.appendChild(txt);
// 插入一个新的节点 a
body.insertBefore(a, p);
};
};
</script>
</html>
运行
4、样式示例
语法
元素.style.样式名 = 样式值
这里有关修改样式注意的点有
一、 若是 CSS 样式名中含有 - 这种名称在JS 中是不合法的，例如： background-color咱们须要将这种样式名，修改成 驼峰命名法backgroundColor 二、经过 style 属性设置的样式都是内联样式，而内联样式有较高的优先级，因此经过JS 修改的样式每每会当即显示。 三、可是若是在样式中写了 !important 则此时样式会有最高的优先级，即便经过 JS 也不能覆盖这个样式。此时将会致使 JS 修改的样式失效，因此尽可能 不要给样式添加 !important 四、经过 style 读取也都是内联样式、没法读取样式表中的样式。
一、设置样式
代码示例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
/* 设置一个基本的样式 */
#box{
width: 100px;
height: 100px;
background-color: darkcyan;
}
</style>
</head>
<body>
<button id="btn">更换样式</button>
<br>
<br>
<div id="box"></div>
</body>
<script>
window.onload = function () {
// 获取到 btn
var btn = document.getElementById("btn");
// 添加点击事件
btn.onclick = function () {
// 获取 box
var box = document.getElementById("box");
box.style.width = "150px"; // 修改宽度
box.style.height = "150px"; // 修改高度
box.style.backgroundColor = "deeppink"; // 修改背景颜色
};
};
</script>
</html>
运行
5、综合示例
一、霓虹灯特效示例
先看效果
代码示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
<script>
var tName="北京首都欢迎您";
var tLen=tName.length;
document.write("<div id='a' style='font-size:50px;'>"+tName+"</div>" );
var color=new Array("#FFCC00","#3333FF","FFCCAA","#FF0000","#FFCC33","#CC33FF");
var ic=0; //这里很关键，必定要设置全局变量
function DColor(){
var StrName=""; //这个颇有必要，否则没法叠加单个汉字
for(var i=0;i<tLen;i++){ //下面一步才是精髓，设置每个汉子不一样颜色，而后拼接起来
var StrName=StrName+"<font color="+color[ic]+">"+tName.substring(i,i+1)+"</font>";
ic=ic+1; //下一个字下一个颜色
if(ic==color.length){
ic=0; //不设置为零，由于他是全局变量，那么会一直加到数组越界
}
}
a.innerHTML=StrName; //能够经过id.innerHTML改变界面的字的颜色
//设置时间的变化 改变状况
setTimeout("DColor()",200); //setTimeout表明每隔200毫秒运行一次函数
}
DColor(); //这个表明直接开始运行这个函数，而不用经过触发事件
</script>
</html>
核心点：
核心点一 : 是ic=0写成全局变量，假如写在方法里，那么每一次初始化结果都同样，那么也不会有霓虹灯效果
核心点二 : color.length和tName.length若是相等一样也不会产生效果，由于每一次结束ic仍是=0，而这里第一次DColor(),ic=0,第二次调用ic初始值=1，因此会有效果。
二、显示系统时间,秒一直动
效果
代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="showTime()"> <!-- 当加载时就执行 -->
<label id="show">显示系统时间</label> <!-- 将系统时间显示在这个位置 -->
</body>
<script type="text/javascript">
function showTime(){
var objDate =new Date(); //获得系统时间对象
var year =objDate.getFullYear(); //获取年份
var month=objDate.getMonth()+1;//获取月份
var date =objDate.getDate();//获取日期
var hours=objDate.getHours();//小时
var minutes=objDate.getMinutes();//分钟
var seconds=objDate.getSeconds();//秒
var day =objDate.getDay(); //获取星期几
show.innerHTML=""+year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds +" 周"+day; //经过id改变界面显示内容
//每隔1秒刷新一次
var timeId=setTimeout(showTime,1000);
}
</script>
</html>
参考
你若是愿意有所做为，就必须善始善终。(21)
相关文章
- 1. systemd详解详解
- 2. CAN详解--协议详解
- 3. LinkedList详解（源码详解）
- 4. RNN详解及BPTT详解
- 5. JSTL详解 JSTL详解
- 6. 【知识详解】Https详解
- 7. [Java] volatile 详详解！
- 8. 注解详解
- 9. 详解
- 10. Lucene索引详解（IndexWriter详解、Document详解、索引更新）
- 更多相关文章...
- • 免费ARP详解 - TCP/IP教程
- • *.hbm.xml映射文件详解 - Hibernate教程
- • Flink 数据传输及反压详解
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. systemd详解详解
- 2. CAN详解--协议详解
- 3. LinkedList详解（源码详解）
- 4. RNN详解及BPTT详解
- 5. JSTL详解 JSTL详解
- 6. 【知识详解】Https详解
- 7. [Java] volatile 详详解！
- 8. 注解详解
- 9. 详解
- 10. Lucene索引详解（IndexWriter详解、Document详解、索引更新）