JavaScript进阶--JS HTML DOM

最新推荐文章于 2024-07-26 10:55:18 发布

lairikeqi

最新推荐文章于 2024-07-26 10:55:18 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/lairikeqi/article/details/81773957

Web前端专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了HTML DOM（文档对象模型）的基本概念，包括如何使用JavaScript访问和操作HTML元素、属性、样式及事件。涵盖了查找、修改HTML内容、属性的方法，以及如何添加、删除和替换DOM节点。提供了丰富的代码实例，帮助读者理解并掌握DOM操作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML DOM简介

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）,HTML DOM 模型被构造为对象的树。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

二、HTML DOM节点

子节点
  Node.childNodes   -- 获取子节点列表NodeList; 注意换行在浏览器中被算作了text节点
  Node.firstChild   -- 返回第一个子节点
  Node.lastChild    -- 返回最后一个子节点

父节点
  Node.parentNode      -- 返回父节点
  Node.ownerDocument   -- 返回祖先节点（整个document）

同胞节点
  Node.previousSibling       -- 返回前一个节点，如果没有则返回null
  Node.nextSibling           -- 返回后一个节点

获取和修改元素样式:
HTML5为元素提供了一个新的属性：classList 来实现对元素样式表的增删改查
node.classList.add(value);         -- 为元素添加指定的类
node.classList.contains(value);    -- 判断元素是否含有指定的类，如果存在返回true
node.classList.remove(value);   -- 删除指定的类
node.classList.toggle(value);   -- 有就删除，没有就添加指定类

修改DOM特性的方法
Node.getAttribute('id')        -- 获取
Node.setAttribute('id')        -- 设置
Node.removeAttribute()         -- 移除
Node.attributes                -- 获取DOM全部特性

三、HTML DOM方法

1.查找HTML元素

1)通过id查找
document.getElementById("id");
-- 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素
如果未找到该元素，则 x 将包含 null

2)通过标签名查找 HTML 元素
本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素
实例:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write(y[i].innerHTML);

3)通过类名找到 HTML 元素
本例通过 getElementsByClassName 函数来查找 class="className" 的元素：
实例
var x=document.getElementsByClassName("className");
document.write(x[i].innerHTML);

2.改变HTML内容、属性
var element=document.getElementById("content");
element.innerHTML="小老弟，你怎么回事？";

document.getElementById("image").src="landscape.jpg";
document.getElementById("p2").style.color="blue";

3.addEventListener() 方法
  removeEventListener()方法

4.myCollection and nodeList
  NodeList 对象是一个从文档中获取的节点列表 (集合) 。
  NodeList 对象类似 HTMLCollection 对象。
  NodeList 只能通过索引来获取。 
  只有 NodeList 对象有包含属性节点和文本节点。

5.JavaScript获取DOM元素的方法

  通过id获取（getElementById）
  通过name属性（getElementsByName）     
  通过标签名（getElementsByTagName）       -- 一般得到的是节点数组
  通过类名（getElementsByClassName）       -- 同上
  获取html的方法（document.documentElement）
  获取body的方法（document.body）
  通过选择器获取一个元素（querySelector）
  通过选择器获取一组元素（querySelectorAll）

6.JavaScript 添加删除dom节点
  1)插入节点appendChild(),在指定节点的最后一个子节点列表之后添加一个新的子节点
    插入节点insertBefore(),在已有的子节点前插入一个新的子节点

    + 先创建一个新的节点
	+ 再向一个已有的节点添加该节点
    var para=document.createElement("p");              -- 创建一个新的节点
    var node=document.createTextNode("这是新段落。");   -- 该节点如需添加文本，则需要创建文本节点
    para.appendChild(node);               -- 再向p元素追加文本节点

    var element=document.getElementById("div1");    -- 获得要添加的节点
    element.appendChild(para);                      -- 利用appenChild追加子节点

  2)删除节点removeChild()，从子节点列表中删除某个节点
    删除成功此方法返回被删除的节点,删除失败则返回 NULL;
    子节点一旦remove则不在DOM树中,但是还存在内存中;如要完全删除对象,可通过把删除的子节
点赋值给 x,再给x赋null

    var parent = document.getElementById("div1");
    var child = document.getElementById("span1");
    var x = parent.removeChild(child);
    x = null;

    + 首先找到要删除节点
    + 再找到要删除节点的父节点
    + 最后根据parent.removeChild(child)
    var parent=document.getElementById("div1");    -- 找到父节点
    var child=document.getElementById("p1");       -- 找到要删除的子节点

  3)替换元素节点replaceChild()	
    语法：parentNode.replace(newNode, targetNode);  -- 使用newNode替换targetNode

补充: JavaScript操作dom节点总结

四、代码实例

1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript HTML DOWN</title>
</head>

<body onload="checkCookies()">
<!-- start -->
<h3 id="id1">JavaScript HTML DOM</h3>
<p onclick="changeText(this)">小老弟</p>
<button onclick="document.getElementById('id1').style.color='red'">点我!</button>

<script>	
	function changeText(id){
		id.innerHTML="你怎么回事？";
	}
</script>
<br> <br> <hr>
<!-- end -->
	
<!-- start -->
<p>弹窗-提示浏览器 cookie 是否可用</p>
<script>

	function checkCookies(){
		if (navigator.cookieEnabled==true){
			alert("Cookies 可用")
		}
		else{
			alert("Cookies 不可用")
		}
	}
</script>
<!-- end -->	

</body>
</html>

2.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数</p>
<button id="myBtn" onclick="myFunction()">click</button> <br><br>
<hr> <br>	

<p id="p1"> </p>
<button id="myBtn2" onmouseover="myFunction2()">onmouseover</button> <br><br>
<button id="myBtn3" onmouseout="myFunction3()">mouseout</button> <br><br>
<button id="myBtn4" onclick="myClear()">clear</button> <br>
<!-- <button id="myBtn" οnclick="myFunction()">点我</button> -->
<script>
//document.getElementById("myBtn").addEventListener("click", myFunction);
	function myFunction() {
  	  alert ("Hello World!");
		alert("函数已被执行！");
	}
	function myFunction2(){
		
		document.getElementById("p1").innerHTML+="小老弟，";
	}
	function myFunction3(){
		
		document.getElementById("p1").innerHTML+="你怎么回事？";
	}
	function myClear(){
		document.getElementById("p1").innerHTML=" ";	
	}
</script>
</body>
</html>

五、方法列表

getElementById()	      返回带有指定 ID 的元素
getElementsByTagName()	  返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
getElementsByClassName()  返回包含带有指定类名的所有元素的节点列表

appendChild()	    把新的子节点添加到指定节点
removeChild()	    删除子节点
replaceChild()	    替换子节点
insertBefore()	    在指定的子节点前面插入新的子节点
createAttribute()	创建属性节点
createElement()	    创建元素节点
createTextNode()	创建文本节点
getAttribute()	    返回指定的属性值
setAttribute()	    把指定属性设置或修改为指定的值