欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

搞定Web前端开发必备！详尽的JavaScript教程与实例解析（含DOM模型）

最编程 2024-08-06 13:50:05
...

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

DOM:Document Object Model,文档对象模型

当网页被加载时，浏览器会创建页面的文档对象模型

HTML DOM 模型被构造为对象的树:

在这里插入图片描述
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML：

  • JavaScript 能够改变页面中的所有 HTML
  • 元素 JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

document对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象

Document 对象是 HTML 文档的根节点
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

提示: Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

document对象常用方法

查找 HTML 元素常用方法

方法 描述
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象
document.getElementsByTagName() 返回带有指定标签名的对象集合
document.getElementsByName() 返回带有指定名称的对象集合 
<script>
    function myLoad(){
		//页面加载完毕之后再去获取页面上的元素，否则获取不到
		//根据ID 获取元素，只能获取到唯一元素(如果有重名的ID元素，获取到的是第一个元素) var div=document.getElementById("myDiv");
		console.log(div);
		//根据指定的类样式的名称获取元素，返回集合
		var list=document.getElementsByClassName("demo"); 		
		console.log("根据类样式的名称获取到的元素的集合长度是:"+list.length); for(var i=0;i<list.length;i++){
        console.log(list[i]);
	}
	
	//根据指定HTML标签名称获取元素，返回集合
	var list2=document.getElementsByTagName("li"); 
	console.log("根据标签的名称获取到的元素的集合长度是:"+list2.length); 
	for(var i=0;i<list2.length;i++){
            console.log(list2[i]);
        }
	//根据指定HTML元素的name属性获取元素，返回集合
	var list3=document.getElementsByName("myli"); console.log("根据标签的名称属性获取到的元素的集合长度是:"+list3.length); 
	for(var i=0;i<list3.length;i++){
            console.log(list3[i]);
    	}
}
</script>
<body onload="myLoad()">
    <p  class="demo"></p>
    <div id="myDiv" class="demo">
		div
    </div>
    <ul class="demo">
        <li>li11111111111</li>
        <li name="myli">li11111111111</li>
        <li>li11111111111</li>
        <li name="myli">li11111111111</li>
    </ul>
</body>

修改 HTML 内容和属性

修改内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性

修改 HTML 元素的内容的语法:
document.getElementById(id).innerHTML= HTML。

PS: 绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档

修改 HTML 属性

修改 HTML 元素属性的语法: 
方式1:
document.getElementById(id).attribute=新属性值;

方式2:
document.getElementById(id).setAttribute(属性名，属性值);

<div id="mydiv">div</div>
var mydiv=document.getElementById("mydiv"); 
mydiv.innerHTML="新的div内容"; document.getElementById("myimg").src="x1.jpg";

<h1 style="color: green;" id="myh1">hello world</h1> var h1=document.getElementById("myh1"); h1.setAttribute("class","bg");//设置属性 
console.log(h1.getAttribute("class"));//获取属性class 
console.log(h1.getAttribute("style"));//获取属性style

修改 HTML 元素的css

修改 HTML 元素css的语法:
document.getElementById(id).style.property=新样式

document.getElementById("myli").style.color="blue"; 
document.getElementById("myli").style.fontFamily="微软雅黑"; 
document.getElementById("myli").style.fontSize="24px";

HTML DOM 元素 (节点)

创建新的 HTML 元素

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

<button type="button" onclick="createNewP()">动态添加一个元素-- appendChild</button>
<button type="button" onclick="createNewP2()">动态添加一个元素-- insertBefore</button>
<div id="div1">
	<p id="p1">这是段落1</p> 
	<p id="p2">这是段落2</p>
</div>
<script>
	function createNewP(){
		var newElementP=document.createElement("p");//创建一个新的段落元素
		var text=document.createTextNode("这是我新创建的段落");//新创建的文本节点 //将文本的节点添加到新创建的元素中
		newElementP.appendChild(text);
		//获取一个页面已经存在的元素
		var div=document.getElementById("div1"); //添加新创建的元素p到已经存在的元素div中
		div.appendChild(newElementP);
	}
	function createNewP2(){
		var newElementP=document.createElement("p");//创建一个新的段落元素
		var text=document.createTextNode("这是我新创建的段落p2");//新创建的文本节点 //将文本的节点添加到新创建的元素中
		newElementP.appendChild(text);
//获取一个页面已经存在的元素
		var div=document.getElementById("div1"); 
		var p1=document.getElementById("p1");
		//添加新创建的元素p到已经存在的元素div中,指定插入到段落P1前面
        div.insertBefore(newElementP,p1);
    }
</script>

替换 HTML 元素

-replaceChild()方法

<div id="div1">
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另外一个段落。</p>
</div>
<button type="button" onclick="changeElemnt()">替换p1</button> <script>
	function changeElemnt(){
		var newElementP=document.createElement("p");//创建一个新的段落元素
		var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点 //将文本的节点添加到新创建的元素中
		newElementP.appendChild(text);
//获取要被替换的元素p1及其父元素div
		var div=document.getElementById("div1");
		var p1=document.getElementById("p1");
//将div中的元素p1替换为新创建的元素
		div.replaceChild(newElementP,p1);
	}
</script>

删除HTML元素

-removeChild()方法

<div id="div1">
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另外一个段落。</p>
</div>
<button type="button" onclick="deleteElement()">删除p1-方式1</button> <button type="button" onclick="deleteElement()">删除p1-方式2</button> 
<script>
	function deleteElement(){
		var div=document.getElementById("div1"); 
		var p1=document.getElementById("p1"); //从父元素div中删除子元素p1 div.removeChild(p1);
    }
    function deleteElement2(){
		var p1=document.getElementById("p1"); //p1.parentNode:作用就是获取要删除元素p1的父元素div p1.parentNode.removeChild(p1);
	}
</script>

上一篇： JavaScript中的十大常用设计模式

下一篇： 搞定前端开发！常见设计模式大汇总

推荐阅读