JavaScript——DOM的使用

DOM简介

  • 当网页被加载是,浏览器会创建页面的文档对象模型(Document Object Model)
    JavaScript——DOM的使用_第1张图片
  • DOM操作HTML
    1. JavaScript改变页面中所有的HTML元素
    2. JavaScript改变页面中所有的HTML属性
    3. JavaScript改变页面中所有的CSS样式
    4. JavaScript改变页面中多有的事件做出反应

DOM操作HTML

  1. 改变HTML输出流:
    • 注意:绝对不要在文档加载完之后使用document.write(),这会覆盖文档。
  2. 寻找元素 :
    • 通过id找到HTML元素:getElementById(“元素id”)
  • 代码:

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<p id="p_id">Hellop>
		<button onclick="demo1()">按钮button>
		<script>
			function demo1(){
				var nv = document.getElementById("p_id");
				nv.innerHTML = "World";
			}
		script>
	body>
html>
  • 效果:
    在这里插入图片描述
    点击按钮后:
    在这里插入图片描述
    • 通过标签名找到HTML元素:getElementsByTagName(“标签名”),和上面类似
  1. 改变HTML内容:
    • 使用属性:innerHTML = “更改的内容”
  2. 改变HTML属性:
    • 使用属性:attribute = “更改属性的内容”
  • 代码:

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<a id="a_id" href="http://www.baidu.com">链接a>
		<button onclick="demo2()">按钮1button>
		<script>
			function demo2(){
				document.getElementById("a_id").href="http://www.taobao.com";
			}
		script>
	body>
html>
  • 效果:
    在这里插入图片描述
    点击链接:
    JavaScript——DOM的使用_第2张图片
    点解按钮后点击链接:
    JavaScript——DOM的使用_第3张图片

DOM操作CSS

  1. 通过DOM对象改变CSS
    • 语法:document.getElementById(“id”).style.property=new style
  • 代码:
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
			}
		style>
	head>
	<body>
		<div id="div1" onmouseover="demo1()" onmouseleave="demo2()">
			Hello
		div>
		<script>
			function demo1(){
				document.getElementById("div1").style.background = "red";
			}
			function demo2(){
				document.getElementById("div1").style.background = "aquamarine";
			}
		script>
	body>
html>
  • 效果:
    当鼠标进入div区域:
    JavaScript——DOM的使用_第4张图片
    当鼠标离开div区域:
    JavaScript——DOM的使用_第5张图片

DOM EventListener 事件句柄

  1. 指定元素添加事件句柄:addEventListener(“事件名”, 函数名)
  • 代码:

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<button id="btn">按钮button>
		<script>
			document.getElementById("btn").addEventListener("click", demo);
			function demo(){
				alert("Hello");
			}
		script>
	body>
html>
  • 效果:点击按钮后
    JavaScript——DOM的使用_第6张图片
  1. 移除方法添加的事件句柄:remoteEventListener(“事件名”, 函数名)

你可能感兴趣的:(JS,DOM,js,html)