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. ZooKeeper 分布式锁 Curator 源码 03：可重入锁并发加锁

    前言 在了解了加锁和锁重入之后,最需要了解的还是在分布式场景下或者多线程并发加锁是如何处理的? 并发加锁 先来看结果,在多线程对 /locks/lock_01 加锁时,是在后面又创建了新的临时节点. ...

  2. 【C#】C#中使用GDAL3（一）：Windows下超详细编译C#版GDAL3.3.0（VS2015+.NET 4+32位/64位）

    转载请注明原文地址:https://www.cnblogs.com/litou/p/15004877.html 目录 一.介绍 二.编译准备 三.编译SQLite 四.编译LibTiff 五.编译PR ...

  3. kafka可视化工具

    Kafka可视化客户端工具(Kafka Tool 2)的安装和使用 Kafka Tool 2 是一款 Kafka 的可视化客户端工具,可以非常方便的查看 Topic 的队列信息.消费者信息以及 kaf ...

  4. [考试总结]noip模拟7

    为啥博客园 \(\LaTeX\) 老挂???! \(\huge{\text{菜}}\) 刚开始写 \(T1\) 的时候,在看到后缀前缀之后,直接想到 \(AC\) 自动机,在画了半个 \(trie\) ...

  5. 深入jvm虚拟机--第一篇 void TemplateInterpreterGenerator::generate_and_dispatch(Template* t, TosState tos_out) 函数

    今天第一次使用虚拟姐打断点,断点设置在了void TemplateInterpreterGenerator::generate_and_dispatch(Template* t, TosState t ...

  6. Spring Security OAuth2 远程命令执行漏洞（CVE-2016-4977）

    影响版本: 2.0.0-2.0.9 1.0.0-1.0.5 poc地址 https://github.com/vulhub/vulhub/blob/master/spring/CVE-2016-497 ...

  7. Hadoop 3.1.1 - Yarn - 使用 FPGA

    在 Yarn 上使用 FPGA 前提 YARN 目前只支持通过 IntelFpgaOpenclPlugin 发布的 FPGA 资源 YARN NodeManager 所在的机器上必须预先安装供应商的驱 ...

  8. DC-4 靶机渗透测试

    DC-4 渗透测试 冲冲冲,努力学习 .掌握 hydra ,nc反弹shell 记住你要干嘛, 找地方上传shell(大多以后台登录为切入点,再反弹shell),shell提权到root 操作机:ka ...

  9. Jmeter分布式压测实战及踩坑处理(含参数化)

    项目中使用Jmeter进行大并发压测时,单机受限内存.CPU.网络IO,会出现服务器压力还没有上 去,但压测服务器由于模拟的压力太大死机的情况.JMeter的集群模式可以让我们将多台机器联合起来 一起 ...

  10. POJ 1190 生日蛋糕题解

    题目地址:http://poj.org/problem?id=1190 一道很有趣的搜索题--主要是剪枝-- 我弄了5个剪枝: 1.当前剩余层数>=上层半径,剪掉 2.当前剩余层数>=上层 ...