12-3 DOM操作
一 DOM基础
1 DOM介绍
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的。
2 DOM树
上图可知，在HTML当中，一切都是节点：（非常重要）
元素节点：HMTL标签。
文本节点：标签中的文字（比如标签之间的空格、换行）
属性节点：：标签的属性。
整个html文档就是一个文档节点。所有的节点都是Object。
3 DOM节点的获取
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div1"); //方式二：通过 标签名 获得 标签数组，所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
4 （获取，更改，删除，节点属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM基础</title>
</head>
<body>
<img src="./1.jpg" alt="a" id="a1" title="手机图片" class="image">
<script type="text/javascript">
//获取节点属性值
var myNode = document.getElementsByTagName("img")[0]; // console.log(myNode.src);
// console.log(myNode.className); //注意，是className，不是class
// console.log(myNode.title);
//
// console.log("-----第一种方式-------");
//
// console.log(myNode["src"]);
// console.log(myNode["className"]); //注意，是className，不是class
// console.log(myNode["title"]);
// console.log('--------------------第二种方式-----------');
// console.log(myNode.getAttribute("src"));
// console.log(myNode.getAttribute("class")); //注意是class，不是className
// console.log(myNode.getAttribute("title"));
//设置节点属性值
// console.log("-----第一种方式-------");
// myNode.src='./2.jpg';
// myNode.className='image2';
console.log('--------------------第二种方式------');
myNode.setAttribute("src","./3.jpg");
myNode.setAttribute("class","image3-box");
myNode.setAttribute("id","你好");
//删除节点的属性
myNode.removeAttribute('class');
myNode.removeAttribute('id');
</script>
</body>
</html>
5 （创建 添加节点属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
</head>
<body>
<div id="box">
<p id="p1">1113</p> </div>
<button id="btn">
添加元素
</button>
<script>
//获取文档
console.log(document);
//获取的html对象
console.dir(document.documentElement);
console.dir(document.getElementsByTagName('html')[0]);
//获取body
console.log(document.body);
var oBtn=document.getElementById('btn');
var oBox=document.getElementById('box');
var op1=document.getElementById('p1');
oBtn.onclick=function () {
var op=document.createElement('p');//创建标签
// // op.innerText=123;//添加文本
op.innerHTML='<a href="#">123</a>';//添加标签
// oBox.appendChild(op);//追加孩子节点 op.style.color='red';
console.log(op.parentNode);//获取p标签的父节点是div
console.log(op.children[0]);//获取p标签的子节点是 a
console.log(oBox.nextElementSibling.innerHTML);//火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）,就是div下面的button标签
oBox.insertBefore(op,op1);//在参考标签之前添加一个标签，op1是参考标签，op是要添加的标签 } </script> </body>
</html>
二 DOM事件操作
1 实例：效果是点击浏览器上面的盒子，弹出内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box1"></div> <script type="text/javascript">
// 1、获取事件源
var div = document.getElementById("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script> </body>
</html>
常见事件如下
2 利用DOM去更改一些属性设置盒子切换的大小和颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM事件</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
}
/*.active{*/
/*background-color: yellow;*/
/*}*/ </style>
<script>
//js入口函数，当文档和图片都加载完成之后，入口函数才调用叫window
window.onload=function() {
console.log(111);
var oDiv=document.getElementById('box');//获取id
console.dir(oDiv);
console.log(oDiv.id);
console.log(oDiv.className);
// 第一种写法
var isRed=true;
oDiv.onclick=function () { //添加一个点击事件
if (isRed){
oDiv.style.backgroundColor='black';
oDiv.style.width='300px';
isRed=false
}else{
oDiv.style.backgroundColor='red';
oDiv.style.width='200px';
isRed=true;
} }; };
</script>
</head>
<body>
<div id="box" class="box1 active">
</div> </body>
</html>
3 利用dom去操作图片的不断切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM事件</title>
<style> </style>
<script> // -------------第二种例子，图片切换--------------------------------
window.onload=function (ev) {
var oimg=document.getElementsByTagName('img')[0];//获取第一个img标签
console.log(oimg);
var obtn=document.getElementsByClassName('btn')[0];//获取第一个btn类名
obtn.style.width='100px';//可以单独设置btn按钮的样式
obtn.style.height='100px';
var tu=true;//设置添加为true
obtn.onclick=function(){ if (tu){
oimg.src='./1.jpg';//第一次默认是1图片
console.log(oimg.id);//获取img的id,相当于get
oimg.id='lv';//相当于set
tu=false }else{
oimg.src='./2.jpg';
tu=true
} } } </script>
</head>
<body>
<div id="box" class="box1 active">
</div>
<img src="./2.jpg" alt="手机" title="小米" id="one">
<!--<img src="./3.jpg" alt="手机" title="小米" id="two">-->
<button class="btn">切换</button>
</body>
</html>
12-3 DOM操作的更多相关文章
- 第12章 DOM操作
目录 *1. 向DOM中注入HTML 1.1 将HTNL字符串转换成DOM 预处理HTML源字符串 包装HTML 1.2 将DOM元素插入到文档中 2. DOM的特性和属性 通过DOM方法和属性访问特 ...
- 摆脱DOM操作，从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
- 深入理解DOM节点类型第一篇——12种DOM节点类型概述
× 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率
刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- 第一百一十六节，JavaScript，DOM操作样式
JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- js，jQuery和DOM操作的总结（二）
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
随机推荐
- python基础--文件相关操作
文件操作方式的补充: “+”表示的是可以同时读写某个文件 r+:可读可写 w+:可读可写 a+:可读可写 x:只写模式[不可读:不存在则创建,存在则报错] x+:可读可写 文件内的光标移动: 1.re ...
- IE9没有内置鼠标手势，还要自己写
写了个IE插件,然后获取鼠标,信息, 模拟了鼠标手势,在虚拟机里面测试,完全好使,但是现在又不敢在Win7上用了. 愁死了... 为了实现一个鼠标手势. 写的那破玩意,竟然50多K.....太大了.. ...
- JQMObile 优势
1.跨平台 目前大部分的移动设备浏览器都支持HTML5标准,jQuery Mobile以HTML5标记配置网页,所以可以跨不同的移动设备,如Apple iOS,Android,BlackBerry, ...
- linux挂载点 和 文件系统$ mount$ cat /etc/fstab$ vgs$ pvs$ lvs$ df -h$ lsof +D / /* beware not to kill your box */
$ mount$ cat /etc/fstab$ vgs$ pvs$ lvs$ df -h$ lsof +D / /* beware not to kill your box */ 一共挂载了多少文件 ...
- LUOGU P1512 伊甸园日历游戏
题目描述 Adam和Eve玩一个游戏,他们先从1900.1.1到2001.11.4这个日期之间随意抽取一个日期出来.然后他们轮流对这个日期进行操作: 1 : 把日期的天数加1,例如1900.1.1变到 ...
- Vue--moment时间格式插件安装和使用
使用链接:http://momentjs.cn/ 1.安装monent 2.导入 3.过滤器 4.template模板使用:
- void 运算符
void 是 javascript 的操作符,意思是:只执行表达式,但没有返回值.该表达式会被计算但是不会在当前文档处装入任何内容,void其实是javascript中的一个函数,接受一个参数,返回值 ...
- 写论文，没数据？R语言抓取网页大数据
写论文,没数据?R语言抓取网页大数据 纵观国内外,大数据的市场发展迅猛,政府的扶持也达到了空前的力度,甚至将大数据纳入发展战略.如此形势为社会各界提供了很多机遇和挑战,而我们作为卫生(医学)统计领域的 ...
- 【linux配置】虚拟机配置静态IP地址
使用VMware配置虚拟机静态IP地址 一.安装好虚拟后在菜单栏选择编辑→ 虚拟网络编辑器,打开虚拟网络编辑器对话框,选择Vmnet8 Net网络连接方式,随意设置子网IP,点击NAT设置页面,查看子 ...
- 自己动手写js分享插件 [支持https] (QQ空间，微信，新浪微博。。。)
转载:https://blog.csdn.net/libin_1/article/details/52424340 废话不多说,传送门:http://download.csdn.net/detail/ ...