JavaScript(2)---DOM详解
<h1 id="javascript2---dom详解"><center>JavaScript(2)---DOM详解</center></h1><h2 id="-一dom概念"><font color="#FFD700"> 一、DOM概念</font></h2>
<p><strong>什么是DOM</strong></p>
<p>DOM全称为文本对象模型(Document Object Model),它定义了所有HTML元素的对象和属性，以及访问他们的方法。它的主要作用包括：</p>
<p><strong>改变HTML 元素</strong> , <strong>改变HTML属性</strong> , <strong>改变CSS 样式</strong>，<strong>对页面中的所有事件做出反应</strong>。</p>
<h4 id="1dom-节点树">1、DOM 节点树</h4>
<p><code>概念</code> DOM模型将整个HTML文档看成一个树形结构，并用document对象表示该文档，树的每个子节点表示HTM档中的不同内容。</p>
<p><strong>如图</strong></p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191210211801380-562302127.jpg" style="border: 1px dashed rgba(255, 0, 0, 1)" width="600" height="300">
<p>上图对应的html代码如下</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<h1>小小</h1>
<a href="www.xx.com">链接</a>
</body>
</html>
</code></pre>
<p>通过这幅图也可以看出节点树中有以下几种关系</p>
<pre><code>1、父级关系（图中 html 是 head 的父亲,head是title的父亲。）
2、子级关系（图中 head 是 html 的儿子,title是head的儿子。）
3、兄弟关系 （图中 head 和 body是兄弟关系。p 和 h1 是兄弟关系。）
</code></pre>
<h4 id="2dom-节点类型">2、DOM 节点类型</h4>
<p>从上图部分，我用四种颜色区分了不同节点的类型,每个节点对应的nodeType也是不一致的。</p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191210212814463-169030870.jpg" style="border: 1px dashed rgba(255, 0, 0, 1)" width="700" height="210">
<h4 id="3dom-节点操作">3、DOM 节点操作</h4>
<p><code>节点查询操作</code></p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191210212920518-626764047.jpg" style="border: 1px dashed rgba(255, 0, 0, 1)" width="700" height="370">
<p><code>节点增删操作</code></p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191210213014167-663470734.jpg" style="border: 1px dashed rgba(255, 0, 0, 1)" width="700" height="210">
<p><code>节点属性操作</code></p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191210213051283-1478146561.jpg" style="border: 1px dashed rgba(255, 0, 0, 1)" width="700" height="210">
<br>
<h2 id="-二查询示例-"><font color="#FFD700"> 二、查询示例 </font></h2>
<p>这里通过举例去更好的理解上面的一些操作。</p>
<h4 id="1查询子元素">1、查询子元素</h4>
<p><code>children</code> : 可以获取当前元素的所有<strong>子元素</strong>，它是不包含空白的。</p>
<pre><code><!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>
</code></pre>
<p><code>输出</code></p>
<pre><code>数组的长度为:3
</code></pre>
<h4 id="2查询父元素">2、查询父元素</h4>
<p><code>parentNode</code> ：获取当前元素的父节点(父元素)</p>
<pre><code><!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>
</code></pre>
<p><code>输出</code></p>
<pre><code><div id="father">
<p id="childNode">我是子节点</p>
</div>
</code></pre>
<h4 id="3查询兄弟元素">3、查询兄弟元素</h4>
<p><code>previousElementSibling</code>获取当前元素的前一个兄弟元素(哥哥元素)<br>
<code>nextElementSibling</code> 获取当前元素的后一个兄弟元素(弟弟元素)</p>
<p><code>示例</code></p>
<pre><code><!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>
</code></pre>
<p><code>输出</code></p>
<pre><code><p id="previous" name="1111">哥哥节点</p>
---------------------
<p id="next">弟弟节点</p>
</code></pre>
<br>
<h2 id="-三增删改示例"><font color="#FFD700"> 三、增删改示例</font></h2>
<h4 id="1增加子节点">1、增加子节点</h4>
<p><code>appendChild()</code> :向一个父节点中添加一个新的子节点<strong>父节点.appendChild(子节点)</strong>;</p>
<p><code>代码示例</code></p>
<pre><code><!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>
</code></pre>
<p><code>运行</code></p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191210211921179-738962422.gif" style="border: 1px dashed rgba(255, 0, 0, 1)" width="600" height="180">
<h4 id="2移除子节点">2、移除子节点</h4>
<p><code>removeChild()</code> ：删除一个子节点 <strong>父节点.removeChild(子节点)</strong>;</p>
<p><code>代码示例</code></p>
<pre><code><!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");
// 获取父节点
var ul = document.getElementById("uls");
ul.removeChild(node); // 删除子节点
};
};
</script>
</html>
</code></pre>
<p><code>运行</code></p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191210212006912-543498452.gif" style="border: 1px dashed rgba(255, 0, 0, 1)" width="600" height="180">
<h4 id="3替换子节点">3、替换子节点</h4>
<p><code>replaceChild()</code> : 可以使用指定的子节点来替换已有的子节点<strong>父节点.replaceChild(新节点,旧节点)</strong>;</p>
<p><code>代码示例</code></p>
<pre><code><!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>
</code></pre>
<p><code>运行</code></p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191210212059950-1050840245.gif" style="border: 1px dashed rgba(255, 0, 0, 1)" width="600" height="180">
<h4 id="4替换指定位置节点">4、替换指定位置节点</h4>
<p><code>insertBefore()</code> : 可以在指定的子节点前插入一个新的子节点 <strong>父节点.insertBefore(新节点,旧节点)</strong>;</p>
<p><code>代码示例</code></p>
<pre><code><!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>
</code></pre>
<p><code>运行</code></p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191210212143352-1731675696.gif" style="border: 1px dashed rgba(255, 0, 0, 1)" width="600" height="180">
<br>
<h2 id="四样式示例"><font color="#FFD700">四、样式示例</font></h2>
<p><code>语法</code></p>
<pre><code>元素.style.样式名 = 样式值
</code></pre>
<p>这里有关修改样式注意的点有</p>
<pre><code>1、 如果 CSS 样式名中含有 - 这种名称在JS 中是不合法的，例如： background-color我们需要将这种样式名，修改为 驼峰命名法backgroundColor
2、通过 style 属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS 修改的样式往往会立即显示。
3、但是如果在样式中写了 !important 则此时样式会有最高的优先级，即使通过 JS 也不能覆盖这个样式。此时将会导致 JS 修改的样式失效，所以尽量 不要给样式添加 !important
4、通过 style 读取也都是内联样式、无法读取样式表中的样式。
</code></pre>
<h4 id="1设置样式">1、设置样式</h4>
<p><code>代码示例</code></p>
<pre><code><!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>
</code></pre>
<p><code>运行</code></p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191210212232863-1550527927.gif" style="border: 1px dashed rgba(255, 0, 0, 1)" width="600" height="220">
<br>
<h2 id="-五综合示例"><font color="#FFD700"> 五、综合示例</font></h2>
<h4 id="1霓虹灯特效示例">1、霓虹灯特效示例</h4>
<p><code>先看效果</code></p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191210212316546-328742978.gif" style="border: 1px dashed rgba(255, 0, 0, 1)" width="600" height="200">
<p><code>代码示例</code></p>
<pre><code><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
<script>
vartName="北京首都欢迎您";
vartLen=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;//这里很关键，一定要设置全局变量
functionDColor(){
var StrName="";//这个很有必要，不然无法叠加单个汉字
for(var i=0;i<tLen;i++){//下面一步才是精髓，设置每一个汉子不同颜色，然后拼接起来
var StrName=StrName+"<font color="+color+">"+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>
</code></pre>
<p><code>核心点</code>：</p>
<p><strong>核心点一</strong>: 是ic=0写成全局变量，假如写在方法里，那么每一次初始化结果都一样，那么也不会有霓虹灯效果</p>
<p><strong>核心点二</strong>: color.length和tName.length如果相等同样也不会产生效果，因为每一次结束ic还是=0，而这里第一次DColor(),ic=0,第二次调用ic初始值=1，所以会有效果。</p>
<h4 id="2显示系统时间秒一直动">2、显示系统时间,秒一直动</h4>
<p><code>效果</code></p>
<img src="https://img2018.cnblogs.com/blog/1090617/201912/1090617-20191210212408594-1812881985.gif" style="border: 1px dashed rgba(255, 0, 0, 1)" width="600" height="150">
<p><code>代码</code></p>
<pre><code><!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 +"&nbsp;周"+day; //通过id改变界面显示内容
//每隔1秒刷新一次
vartimeId=setTimeout(showTime,1000);
}
</script>
</html>
</code></pre>
<br>
<h3 id="参考"><font color="#FFD700">参考</font></h3>
<p>1、前端学习记录之Javascript-DOM</p>
<p>2、JavaScript DOM</p>
<p><img src="https://img2020.cnblogs.com/blog/1090617/202111/1090617-20211117135827845-311914362.gif" alt="" loading="lazy"></p>
<br>
<pre><code>你如果愿意有所作为，就必须有始有终。(21)
</code></pre><br><br>
来源：https://www.cnblogs.com/qdhxhz/p/12244271.html
頁:
[1]