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>
js之DOM入门（慕课网学习笔记）的更多相关文章
- JavaScript入门--慕课网学习笔记
JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...
- JavaScript进阶--慕课网学习笔记
JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...
- HTML基本语法（慕课网学习笔记）
标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- js之window对象（慕课网学习笔记）
javaScript定义了一个变量一个函数都会变成window中的一个成员 var a=1; alert(window.a) //会输出a的值 window基础 创建窗口.调整窗口.移动窗口.关闭窗口 ...
- 初识javaScript(慕课网学习笔记)
js输出 window.alert() 警告框 document.write() 写到HTML文档中 innerHTML 写到HTML元素 console.log() 写到浏览器的控制台 <!D ...
- Float浮动（慕课网学习笔记）
float浮动 属性:值 意义 float:left 左浮动 float:right 右浮动 float:none 不浮动 float:inherit 继承父元素浮动属性,若父元素没有浮动属性则失效 ...
- CSS基本语法（慕课网学习笔记）
CSS的声明,内外联样式以及CSS的优先级 css学习.html <!DOCTYPE html> <html lang="en"> <head> ...
- 【慕课网学习笔记】Java共享变量的可见性和原子性
1. Java内存模型(Java Memory Model, JMM) Java的内存模型如下,所有变量都存储在主内存中,每个线程都有自己的工作内存. 共享变量:如果一个变量在多个线程中都使用到了,那 ...
- CSS定位（慕课网学习笔记）
定位模型 static自然模型 relative相对定位模型 absolute绝对定位模型 fixed固定定位模型 sticky磁铁定位模型 possition之static(默认的设置)(静态定位. ...
随机推荐
- 基于SSM酒店管理系统mysql版本（前后台）
介绍:spring,springmvc,mybatis,mysql,eclipse 截图: 数据库表:CREATE TABLE `account` ( `id` int(11) NOT NULL AU ...
- Requests方法 -- Token获取操作
获取token和code流程如下:a.先登陆抓包查看post(提交表单操作)头中是否有token和code关键字b.已知步骤a中出现了token和code,不登录前刷新登陆页面,查看response中 ...
- DNS服务器安全---通过ipset对DNS异常解析流量的源IP地址进行管控
ipset介绍 ipset是iptables的扩展,它允许你创建 匹配整个地址集合的规则.而不像普通的iptables链只能单IP匹配, ip集合存储在带索引的数据结构中,这种结构即时集合比较大也可以 ...
- [HNOI2008]GT考试 题解
这题比较难搞.考虑设计状态:\(f_{i,j}\) 表示当前考虑到 \(X_i\) 位,且 \(X\) 的后 \(j\) 位刚好与 \(A\) 列匹配时的方案数.最终答案为 \(\sum_{i=0}^ ...
- Sunset靶机
仅供个人娱乐 靶机信息 https://www.vulnhub.com/entry/sunset-sunrise,406/ 一.主机探测 二.信息收集 nmap -sS -sV -T5 -A -p- ...
- Gateway网关匹配规则
Gateway匹配规则 重要概念 路由 route 断言 predicate 过滤器 fliter 一.时间匹配 在 after 时间之后的所有请求转发到 URI中的地址 gateway: disco ...
- 【FATE】设置虚拟机固定IP以及免密登录
一.前期准备 1.VMWare上新建三个Centos7的虚拟机 2.VMWare虚拟机的三种联网方式 1.桥接模式 -- 桥接: 默认使用VMnet0 这一种联网方式最简单,在局域网内,你的主机是怎么 ...
- 解决 OnDropFiles 可能无响应的问题【转】
大多数程序都有接收拖放文件的功能,即是用鼠标把文件拖放到程序窗口上方,符合格式的文件就会自动被程序打开.最近自己对编写的程序增加了一个拖放文件的功能,在 Windows XP.Windows Serv ...
- maven将依赖打入jar包中
1.在pom.xml中加入maven-assembly-plugin插件: <build> <plugins> <plugin> <artifactId> ...
- 三年Android开发，月薪一万二，不敢跳槽，每天都很焦虑
在我们的身边,存在一个普遍现象:很多人从事Android开发工作多年,走过的弯和坎,不计其数,经历的心酸难与外人道也.可是技术确难以提升.止步不前,薪资也只能看着别人水涨船高,自己却没有什么起色. 虽 ...