js之DOM入门（慕课网学习笔记）

DOM简介

在这里插入图片描述

获得元素

document.getElementById(’’) 1、通过id获得元素内容
document.getElementsByTagName(’’) 2、通过标签获得元素内容
document.getElementsByClassName(’’) 3、通过class获得元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dom简介</title>
</head>
<body>
	<div id="intro">helloworld</div>
	<div id="main">
		<p>The DOM is very useful.</p>
	</div>

	<div class="content">1</div>
	<div class="content">2</div>
	<div class="content">3</div>
	<div class="content">4</div>

	<script type="text/javascript">
		// 通过js获取html标签
		var intro = document.getElementById("intro");  // 通过id找html，唯一的
		var main = document.getElementById("main");
		var p = main.getElementsByTagName("p")[0];  //通过标签查找
		var content1 = document.getElementsByClassName("content")[0];  //通过class获得元素内容
	</script>
</body>
</html>

DOMHTML(修改HTML)

element.innerHTML=’ '//修改其中的内容
element.getAttribute() //获取属性
element.setAttribute() // 添加或者修改
element.src //针对image
element.href //针对a标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dom html</title>
</head>
<body>
	<div id="main" data="nihao">123</div>

	<img src="1.jpg" id="image" />

	<a id="goUrl" href="">调到百度</a>
	<script type="text/javascript">
		var main = document.getElementById("main");
		//修改其中的内容
		main.innerHTML= 'helloWorld';
 
		/**
		 *		element.getAttribute()   //获取属性
				element.setAttribute()   // 添加或者修改
				element.src    //针对image
				element.href 	//针对a标签

		 * 
		 */
		//获取属性值
		alert(main.getAttribute("data"));
		//修改属性值
		main.setAttribute("data", "buhao");
		//添加没有的属性
		main.setAttribute("dd", "ddname");

		var image = document.getElementById("image");
		//比setAttribute更方便，修改src
		image.src = "2.jpg";

		var goUrl = document.getElementById("goUrl");
		goUrl.href = "http://www.baidu.com"
	</script>
</body>
</html>

DOM-CSS（修改css）

document.getElementById("").style.color

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dom css</title>
</head>
<body>
	<div id="main">helloworld</div>
	<script type="text/javascript">
		var main = document.getElementById("main");
		main.style.color = "blue";
		main.style.fontSize = "100px";
	</script>
</body>
</html>

DOM-事件

元素动作反应事件（这就是事件）

1）事件内嵌元素中
2）Element.οnclick=function(){displayDate()};
3）Element.addEventListener(“click”, function(){});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dom 事件</title>
</head>
<body>
	<!-- 
		1、元素
		2、动作
		3、触发的结果
		1）事件内嵌元素中 
		2）Element.onclick=function(){displayDate()};
		3）Element.addEventListener("click", function(){ });
	 -->
	<!-- 第一种方式 -->
	<div onclick="alert('helloworld')">按钮</div>
	<!-- 第二种方式 -->
	<div id="main">我是main</div>
	<!-- 第三种方式 -->
	<div id="btn">我是btn</div>

	<script type="text/javascript">
		//第二种方式
		var main = document.getElementById("main");
		main.onclick = function(){
			alert("main被触发了");
		}
		//第三种方式
		var btn = document.getElementById("btn");
		btn.addEventListener("click", function(){
			alert("btn被触发了");
		});
	</script>
</body>
</html>

DOM节点

document.createElement(“p”) //创建一个p标签
document.createTextNode(“新增”) //创建一段文字
parent.appendChild(child); //将child对应的文字放到parent中
parent.removeChild(child); //删除

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dom 节点</title>
</head>
<body>
	<div id="div1">
		<p id="p1">我是第一个p</p>
		<p id="p2">我是第二个p</p>
	</div>
	<script type="text/javascript">
		var p = document.createElement("p"); // <p></p>  
		var word = document.createTextNode("我是新增的p标签");  // 我是新增的p标签

		p.appendChild(word);  //<p>我是新增的p标签</p>

		//将p标签加入到div1中
		var div1 = document.getElementById("div1");
		div1.appendChild(p);  

		//删除元素
		var p1 = document.getElementById("p1");
		div1.removeChild(p1);
	</script>
</body>
</html>