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. 【Azure Redis 缓存】Azure Redis出现了超时问题后，记录一步一步的排查出异常的客户端连接和所执行命令的步骤

    问题描述 Azure Redis在使用的过程中,多次无规律的出现超时问题.抓取到客户端的异常错误后,想进一步的分析是何原因导致了如下异常呢? Timeout awaiting response (ou ...

  2. 10分钟系列：NetCore3.1+EFCore三步快速完成数据库交互

    前言 做程序开发,不管是什么语言什么数据库,其中的ORM(对象关系映射)是必不可少的,但是不管选择哪一种ORM,都需要了解其中的运行机制,配置帮助类等等. 所以很多ORM都开始进行升级封装,我们只需要 ...

  3. centos7 源码安装指定版本的php7

    很多时候可能会遇到需要手动源码安装软件的时候,所以自己实践了一把,并且把安装过程中遇到的问题,以及在网上找到的解决办法(实测有效)都记录下来,方便日后学习实践. 1. 系统环境 # cat /etc/ ...

  4. 技术期刊 · 天光台高未百尺 | Uber 工程师的 JS 算法课;大数据时代的个人隐私;设计师的 Github;告别 PPT 工程师;从零开始实现的像素画

    蒲公英 · JELLY技术期刊 Vol.42 这是一个最好的时代,多样化的平台给了所有人成长发展的机会,各种需求和解决需求的人让人大开眼界:但这也并不是完美的时代,"前端还需要懂什么算法?& ...

  5. 深入刨析tomcat 之---第21篇 tomcat 对jsp页面支持的实现原理

    writedby 张艳涛 web技术,以前的动态网页技术多是jsp页面,比如点击一个菜单目录,直接访问了一个LRJSDetailInput.jsp页面,这个页面 有<html><bo ...

  6. jvm源码解读--12 invokspecial指令的解读

    先看代码 package com.zyt.jvmbook; public class Girl extends Person{ public Girl() { int a; } @Override p ...

  7. H5页面怎么跳转到公众号主页？看过来

    前言: 做公众号开发的小伙伴,可能会遇到这种需求: 在一个H5页面点击一个关注公众号按钮跳转到公众号主页. 听到这个需求的一瞬间,疑惑了!这不可能! 摸了摸高亮的额头!没办法,做还是要做的 开始上解决 ...

  8. jboss未授权访问

    测试 poc地址 https://github.com/joaomatosf/jexboss

  9. 使用C#winform编写渗透测试工具--Web指纹识别

    使用C#winform编写渗透测试工具--web指纹识别 本篇文章主要介绍使用C#winform编写渗透测试工具--Web指纹识别.在渗透测试中,web指纹识别是信息收集关键的一步,通常是使用各种工具 ...

  10. mitmproxy第一次尝试-猿人学第九题

    启动 mitmdump -s http_proxy.py -p 9000 替换js代码 # -*- coding: utf-8 -*- import re main_url = 'http://mat ...