DOM快速上手（快速回忆）

最新推荐文章于 2024-11-06 20:20:40 发布

EDEGOD

最新推荐文章于 2024-11-06 20:20:40 发布

阅读量342

点赞数

分类专栏：前端文章标签： DOM 前端

本文链接：https://blog.csdn.net/edegod/article/details/89788934

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学DOM之前建议先学会HTML、CSS、JS，至少了解，我就是只学了HTML就看DOM，有点不适应，好在我有点编程功底，还是能大概看懂的。

我这个是在w3school学完之后，精简整理的，有些东西让我舍了或者合并了，如果不适的化还是看w3school原版吧。

一、简介：

就是实现程序与脚本，动态的访问和更新文档(HTML/XML)内容、结构、样式。

对于HTML来说就是：关于如何获取、修改、添加或删除 HTML 元素的标准。

如何实现呢？

在JS中调用：js对象.DOM方法.DOM属性

二、HTML的DOM节点树

DOM标准规定HTML所有内容都看作节点，例如整个文档，元素，元素内文本，属性，注释等。DOM的对象为方法和属性。

上图就是DOM在HTML中的节点树，树中所有节点可通过js访问（增删改）。

至于父子同胞节点，字面意会。

三、方法

方法是指能够执行的动作（比如添加或修改元素）

常用方法：

getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

四、属性

属性是指能够获取或设置的值（比如节点的名称或内容）。

1. nodeName 属性规定节点的名称。

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

2. nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

3. nodeType 属性

元素 1
属性 2
文本 3
注释 8
文档 9

五、访问

即访问节点，访问方法：

1. getElementById()

2. getElementById(); 方法返回带有指定 ID 的元素：

3. getElementsByTagName()

node.getElementsByTagName("tagname"); 返回带有指定标签名tagname的所有元素。

下面的例子返回包含文档中所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）：

document.getElementById("main").getElementsByTagName("p");

4. getElementsByClassName()

document.getElementsByClassName("intro");查找带有相同类名的所有 HTML 元素

六、修改

1. 更改内容(innerHTML只是返回子节点)

使用innerHTML属性：

<!DOCTYPE HTML>
<html>
<body>

<p id=”p1”>Hello World</p>

<sript>
document.getElementById(“p1”).innerHTML=”New text”;
<script>

</body>
</html>

下面利用函数改变<p>内文本内容：

<!DOCTYPE html>

<html>
<body>

<p id=”p1”>Hello World</p>

<script>
funtion ChangeText()
{
document.getElementById(“p1”).innnerHTML=”New text”;
}

</body>
</html>

利用replaceChild()替换指定元素（不止文本）：

<div id=”dic1>

<p id=”p1”>This is a paragraph.</p>
<p id=”p2”>This is another paragraph.</p>

</div>


<script>

var para=document.createElement(“p”);
var node=document.createTextNOde(“This is new”);
para.appendChild(node);

var parent=document.getElementById(“div1”);
var child=document.getElementById(“p1”);
parnet.replaceChild(para.child);

</script>

2. 更改HTML样式

如改变段落颜色：

<html>
<body>

<p id=”p2”>Hello World</p>

<script>
document.getElementById(“p2”).style.color=”blue”;
</script>

</body>
</html>

3. 创建新的HTML元素（默认末子元素添加）

<div id=”d1”>

<p id=”p1”>This is a paragraph.</p>
<p id=”p2”>This is another paragraph.</p>

</div>

<script>

var para=document.createElement(“p”);
var node=document.createTextNode(“This is new.”);
para.appendChild(node);

var element=document.getElementById(“d1”);
                                  //var child=document.getElementById(“p1”);
element.appendChild(para);        //element.insertBefore(para,child);

</script>

4. 删除HTML元素

例如：

<div id=”div1”>

<p id=”p1”>This is a paragraph.</p>
<p id=”p2”>This is another paragrapgh</p>

</div>

 <srcipt>

var parent=document.getElementById(“div1”);
var child=document.getElementById(“p1”);
parent.removeChild(“child”);
//或者移除定位父节点，使用parentNode自动查找父节点如：child.parentNode.remove(“child”);

</script>

七、事件

比如点击事件、移动事件、加载事件、表单提交、改变输入字段等

onclick&onmouseup&onmousedown

点击触发

1. 点击文字改变如下（有顺序要求）：

<!DOCTYPE html>

<html>
<body>

<h1 onclick=”this.innerHTML=’hello’”>请点击文字</h1>

</body>
</html>

2. 使用函数实现上面功能（无顺序要求）：

<!DOCTYPE html>

<html>
<body>
<script>

funtion changtext(id)
{
id.innerHTML=”hello”;
}

</script>

<h1 onclick=”changetext(this)”>请点击文字</h1>

</body>
</html>

还有这种方法：

<!DOCTYPE html>

<html>

<body>

<p>点击执行</p>
<button id=”1”>按钮</button>
<p id=”2”></p>

<script>

document.getElementById(“1”).onclick=function(){displayDate()};
function displayDate()
{
document.getElementById(“2”).innerHTML=Date();
}

</script>
</body>

</html>

点击按住触发

<!DOCTYPE HTML>

<html>
<body>
<div

onmousedown=”mDown(this)”
onmouseup=”mUp(this)”

style=”background-color:#D94A38;width:200px;height:50px;padding-top:25px:text-align:center;”>

</div>

<script>

function mDown(obj)
{
obj.style.backgroundColor=”#lec5e5”;
obj.inerHTML=”松开鼠标”;
}

function mUp(obj)
{
obj.style.backgroundColor=”#D94A38”;
obj.innerHTML=”点击这里”;
}

</script>

</body>

</html>

onload&onunload

进入或离开页面触发，onload可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。onload和onunload 事件可用于处理cookies，例如：

<!DOCTYPE html>

<html>

<body onload=”checkCookies()”>

<script>

funtion checkCookies()
{
if (navigator.cookieEnabled==true)
       {
       alert(document.cookie)
       }
else
       {
       alert(“null”)
       }
}

</script>

<p>有则弹出cookie，无则返回null</p>
</body>
</html>

onchange

常用于输入字段的验证、改变等

例如小写变大写：

<!DOCTYPE html>

<html>
<head>
<script>

function myFunction()
{
var x=document.getElementById(“fname”);
x.value=x.value.toUpPerCase();
}

</script>
</head>
<body>

<input type=”text” id=”fname” onchange=”myFunction()”>

</body>
</html>

onmouseover&onmouseout

鼠标指针移动到或离开元素时触发函数

<!DOCTYPE HTML>

<html>
<body>
<div

onmouseover=”mOver(this)”
onmouseput=”mOut(this)”

style=”background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;”>

</div>

<script>

function mOver(obj)
{
obj.innerHTML=”mouse in here”
}

function mOut(obj)
{
obj.innerHTML=”mouse out”
}

</script>
</body>
</html>

八、导航

1. 使用length实现元素循环

<!DOCTYPE HTML>

<html>
<body>


<p>the first para</p>
<p>the second para</p>
<p>the third para</p>

<script>

x=document.getElementsByTagName(“p”);
for(i=0;i<x,length;i++)
       {
       document.write(x[i].innerHTML);
       document.write(“<br>”);
       }

</script>
</body>
</html>