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>

js之DOM入门（慕课网学习笔记）的更多相关文章

  1. JavaScript入门--慕课网学习笔记

     JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...

  2. JavaScript进阶--慕课网学习笔记

                         JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...

  3. HTML基本语法（慕课网学习笔记）

    标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  4. js之window对象（慕课网学习笔记）

    javaScript定义了一个变量一个函数都会变成window中的一个成员 var a=1; alert(window.a) //会输出a的值 window基础 创建窗口.调整窗口.移动窗口.关闭窗口 ...

  5. 初识javaScript(慕课网学习笔记)

    js输出 window.alert() 警告框 document.write() 写到HTML文档中 innerHTML 写到HTML元素 console.log() 写到浏览器的控制台 <!D ...

  6. Float浮动（慕课网学习笔记）

    float浮动 属性:值 意义 float:left 左浮动 float:right 右浮动 float:none 不浮动 float:inherit 继承父元素浮动属性,若父元素没有浮动属性则失效 ...

  7. CSS基本语法（慕课网学习笔记）

    CSS的声明,内外联样式以及CSS的优先级 css学习.html <!DOCTYPE html> <html lang="en"> <head> ...

  8. 【慕课网学习笔记】Java共享变量的可见性和原子性

    1. Java内存模型(Java Memory Model, JMM) Java的内存模型如下,所有变量都存储在主内存中,每个线程都有自己的工作内存. 共享变量:如果一个变量在多个线程中都使用到了,那 ...

  9. CSS定位（慕课网学习笔记）

    定位模型 static自然模型 relative相对定位模型 absolute绝对定位模型 fixed固定定位模型 sticky磁铁定位模型 possition之static(默认的设置)(静态定位. ...

随机推荐

  1. EasyUI学后总结第一集

    1,创建Easyui组件-使用html还是使用js方式? 如果在创建Easyui组件的时候,组件再被更改,那么属于静态组件,对于静态组件不要使用js方式创建--会增加js代码量. 如果创建的Easyu ...

  2. 前端开发入门到进阶第三集【JavaScript中如何将html字符串转化为Jquery对象或者Dom对象】

    https://www.cnblogs.com/mingjiatang/p/4746845.html

  3. Spring解决Attribute tx bound to namespace httpwww.w3.org2000xmlns was already specified

    Spring|解决Attribute "tx" bound to namespace "http://www.w3.org/2000/xmlns/" was a ...

  4. Leetcode：面试题 04.04. 检查平衡性

    Leetcode:面试题 04.04. 检查平衡性 Leetcode:面试题 04.04. 检查平衡性 Talk is cheap . Show me the code . /** * Definit ...

  5. ArcGis API JS 4.X本地化部署与地图的基础使用

    准备工作 首先下载ArcGIS API for JavaScript4.x,这里下载的是4.19. 官方下载地址:https://developers.arcgis.com/downloads/ ar ...

  6. DOS 常用命令集

    net use $">\\ip\ipc$Content$nbsp;" " /user:" " 建立IPC空链接 net use $"& ...

  7. ubuntu16登录后黑屏无法进入系统问题汇总

    今晚在使用虚拟机的过程中发现有些卡顿,顿时想给虚拟机增加内核数,然后,然后,,,我就再也没有看到过图形化界面,在某搜索引擎查找了半天,把我的问题汇总了一下发出来,希望对遇到同样问题的有所帮助. 出现黑 ...

  8. Tom_No_02 Servlet向流中打印内容,之后在调用finsihResponse,调用上是先发送了body,后发送Header的解释

    上次在培训班学上网课的时候就发现了这个问题,一直没有解决,昨天又碰到了,2-3小时也未能发现点端倪,今早又仔细缕了下,让我看了他的秘密 1.Servlet向流中打印内容,之后在调用finsihResp ...

  9. 利用LRU策略实现Axios请求缓存

    业务场景 前一段时间刚做完一个项目,先说一下业务场景,有别于其他的前端项目,这次的项目是直接调用第三方服务的接口,而我们的服务端只做鉴权和透传,第三方为了灵活,把接口拆的很零散,所以这个项目就像扔给你 ...

  10. videojs文档翻译Guides-Plugins

    Video.js Plugins Video.js的一大优势在于其插件生态系统,允许来自世界各地的作者分享他们的视频播放器定制.这包括从最简单的UI调整到新的播放技术和资源处理程序的一切! 因为我们将 ...