JavaScript 操作DOM对象
1）JavaScript 操作DOM對象
1.DOM：是Document Object Model 的缩写，及文档对象模型
2.DOM通常分为三类：DOM Core（核心）、HTML-DOM 和 CSS-DOM
1.DOM Core
DOM Core 不是JavaScript的专属品，任何一种支持DOM的编辑器语言都可以使用它
它的用途不仅限于处理一种使用标记语言编写出来的文档如HTML文档
getElementById()/getElementByTagName()等方法都是 DOM Core的组成部分
栗子：使用Document.getElementByTagname("input")可获取页面中的<input>元素
2.HTML-DOM
获取DOM模型中的某些对象、属性、既可以使用DOM-Core实现，也可以使用HTML-DOM实现
相对于DOM Core获取对象、属性而言，当使用HTML-DOM时，代码通常较为简单，只是它
的应用范围没有DOM Core广泛，仅适用于处理HTML文档
3.CSS-DOM
CSS-DOM是针对CSS的操作，在JavaScript中，CSS-DOM技术的主要作用是获取和设置Style
对象的各种属性，即CSS属性，通过改变style对象的各种属性，可以使用网页呈现出各种
不同的效果。
2.节点和节点关系
简介：DOM是以树状结构组织的HTML文档，根据DOM概念，我们可以知道， HTML文档中每个标签
或元素都是一个节点，在DOM中是这样规定的
2-1：整个文档是一个文档节点
2-2：每个HTML标签是一个元素节点
2-3：包含在HTML元素中的文本是文本节点
2-4: 每个HTML属性是一个属性节点
[javascript] view plain copy <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM 节点</title>
</head>
<body>
<img src="#" alt="水果" id="fruit">
<h1>喜欢水果</h1>
<p>DOM 应用</p>
</body>
</html>
2-6使：用父（parent）、子（child）和同胞（sibing）等术语来描述这些节点的层次关系，父节点拥有节点，
同级的子节点被称为同胞或兄弟节点，关系如下：
@在树状中，顶部节点被称为根（root），如<html>节点。
@每个节点都有父节点，除了根（他没有父节点）如<head>和<body>的父节点 都是<html>,
文本 节点DOM应用的父节点是<p>节点。
@一个节点可以拥有任意数量的子节点，如<body>节点的子节点有<img>、<h1>和<p>
@同胞节点是拥有相同父节点的节点、如<img>、<h1>和<p>就是兄弟节点、他们的父节点均
为 <body>
3.访问节点
使用DOM Core访问HTML文档的节点主要有两种方式，一种是使用getElement系列方法访问节点、另外一
种是根据节点的层次关系访问节点。
3-1：使用getElement系列方法访问指定节点getElementById
1.getElementById()返回按id属性查找的第一个对象对象的引用
2.getElementByName()返回按带有指定名称name查找的对象集合
3.getElementByTagName()返回带有指定标签 TagName查找的对象的集合
3-2:根据层次关系访问节点
通过getEleMent三种方法都会忽略文档的结构，因此在HTML DOM中提供了一些节点属性如下
节点属性：
1.parentNodes 返回节点的父节点
2.childNods 返回子节点集合，childNods[i]
3.firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
4.lastChild 返回节点的最后一个子节点
5.nextSibling 下一个节点
6.prebiousSiling 上一个节点
来一个栗子尝尝：
<body>
<section id="news">
<header>京东快报<a href="">更多</a></header>
<ul>
<li><a href="">我是测试A</a> </li>
<li><a href="">我是测试B</a> </li>
<li><a href="">我是测试C</a> </li>
<li><a href="">我是测试D</a> </li>
<li><a href="">我是测试E</a> </li>
</ul>
</section>
/*
section 的子节点（childNodes）是header 和 ul
header 和 ul 的父节点是section（parentNode）,
header 是 section的第一个子节点（firstChild）
ul是section节点的最后一个子节点（lastChild）
后面省略....请自行思考
*/
</body>
要是访问第三个li节点，该怎么做那？不妨再吃个栗子
第一种做法：
var obj = document.getElementById("news");
var xx=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML;
alert(xx);
运行结果：<li><a href="">我是测试C</a> </li>
要是在第一个li标签打一个回车，相当于一个空行，则运行结果有变化?
运行结果：<li><a href="">我是测试B</a> </li>
解析：浏览器把空行也当做了标签，这就是浏览器的不兼容问题
避免上述现象应该怎么办那？
在JavaScript中给大家提供了一组可兼容不同浏览器的element属性，可以消除空行
firstElementChild 返回节点的第一个子节点，最普遍的用法是访问
lastElementChild 返回节点的最后一个节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
var obj = document.getElementById("news");
var xx=obj.lastElementChild.firstElementChild.nextElementSibling.nextElementSibling.innerHTML;
alert(xx);
注意事项：
在IE下支持 firstChild lastChild previousSibing nextSibling,但是在FireFox 下由于它会把标签之间
的空格、换行等当成文本节点，因为为了准确地找到相应的元素，使用firsElementChild
、lastElementChild 、previousElementSibling、nextElementSibling 来兼容浏览器
2）节点信息
节点是DOM层次结构中的任何类型的对象的通用名称，每个节点都拥有包含着关于节点某些信息的属性，
这些属性如下：
nodeName （节点名称）
nodeValue （节点值）
nodeType （节点类型）
1. nodeName 属性包含某个节点名称，元素节点的nodeName 是标签名称，文本节点的nodeName永远是#text
文档节点的nodeName 永远是#document。
2. nodeValue 节点值，对于节点，nodeValue 属性包含文本；对于属性节点，nodeValue属性包含属性值，nodevalue
属性对于文本节点，和元素节点是不可用的
3.nodeType 属性可返回节点的类型，是一个只读属性，如返回的是元素节点、文本节点、注释节点。
节点类型：
节点类型 NodeType值
元素element 1
属性attr 2
文本text 3
注释comments 8
文本document 9
来一个栗子：
<body>
<ul id="nodelist">
<li>nodeName</li>
<li>nodeValue</li>
<li>nodeType</li>
</ul>
<script>
//拿到根节点
var nodes=document.getElementById("nodelist");
//拿到根节点下的第一个子节点的类型
var type1=nodes.firstElementChild.nodeType;
//拿到拿到根节点下的第一个子节点的子节点的类型值
var type2=nodes.firstElementChild.firstChild.nodeType;
// \\ var type2=nodes.firstElementChild.childNodes[0].nodeType;
//拿到拿到根节点下的第一个子节点的子节点的类型名称
var name1=nodes.firstElementChild.firstChild.nodeName;
//拿到拿到根节点下的第一个子节点的子节点的文本值
var str=nodes.firstElementChild.firstChild.nodeName;
alert("type1:"+type1+"\n"+"type2:"+type2+"\n"+"name1:"+name1+"\n"+"str:"+str);
</script>
</body>
3）操作节点
1.操作节点属性
语法： getAttribute（“属性名”）；
setAttribute（“属性名”，“属性值”）；
小栗子：
<body>
<p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来<input type="radio" name="book" onclick="book()">林允儿 </p>
<div>
<img src="" alt="" id="image" onclick="ing()">
<span></span>
</div>
<script>
function book()
{
//拿到book节点的集合
var ele=document.getElementsByName("book");
//拿到图片元素
var img=document.getElementById("image");
//判断选中的是第几个按钮
if(ele[].checked){
img.setAttribute("src","img//dog.jpg");
img.setAttribute("alt","我和狗狗一起活下来");
img.nextElementSibling.innerHTML="我和狗狗一起活下来";
}else if(ele[].checked)
{
img.setAttribute("src","img//xxx.jpg");
img.setAttribute("alt","林允儿");
img.nextElementSibling.innerHTML="林允儿";
}
}
//用来测试是否修改值成功,点击图片测试
function ing()
{
//拿到图片元素
var img=document.getElementById("image");
alert(img.getAttribute("alt"));
}
</script>
</body>
2.创建和插入节点
名称 描述
createElement（tagName） 创建一个标签名为tagName的新元素节点
A.appendChild(B) 把B节点追加至A节点的末尾
insertBefore(A,B) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点
小栗子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>操作节点</title>
</head>
<body>
<p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来<input type="radio" name="book" onclick="book()">林允儿 </p>
<div></div>
<script>
function book() {
//拿到book节点的集合
var ele = document.getElementsByName("book");
//拿到第一个DIV
var domDiv=document.getElementsByTagName("div")[];
if(ele[].checked)
{
var img=document.createElement("img");
img.setAttribute("src","img//ccc.jpg");
img.setAttribute("onclick","cotyNode()")
domDiv.appendChild(img);
}else if(ele[].checked)
{
var img=document.createElement("img");
img.setAttribute("src","img//xxx.jpg");
img.setAttribute("onclick","cotyNode()")
domDiv.appendChild(img);
}
}
function cotyNode()
{
var domDiv=document.getElementsByTagName("div")[];
var newDom=domDiv.lastChild.cloneNode(false);
domDiv.insertBefore(newDom,domDiv.firstChild);
}
</script>
</body>
</html>
3.删除和替换节点
名称 描述
removeChild( node ) 删除指定的节点
replaceChild( newNode,oldNode) 属性attr 用其他的节点替换指定的节点
4.操作节点样式
style属性：HTML元素 . style . 样式属性 = “值”
document . getElementById("titles").style.color="#00000";
document . getElementById("titles").style.fonSize="25px";
5.获取元素的样式
语法一： HTML 元素 . style . 样式属性；
示例： alert( document . getElementById（“carList”）. style . display )；
语法一： 只能获取内联样式的属性值， 无法获取内部样式表 或 外部样式表的属性值。
语法二：document.defaultView.getComputedStyle( 元素，null ) . 属性；
示例：var carList = document.getElementById( "carList" );
alert( documen . defaultView.getComputedStyle（carList，null）. dispaly );
语法二：可以实现获取样式属性值
语法三：HTML元素 . currentStyle . 样式属性；
alert（document . getElementById（“carList”）. currentStyle . display）;
语法三指兼容 IE 浏览器
4）JavaScript 获取元素位置
1）元素属性应用
document . documentElement . scrollTop；
document . documentElement . scrollLeft；
或者
document . body . scrollTop；
document . body . scrollLeft；
两者的区别在于：针对于不同的浏览器 上述针对 标准浏览器使用 下着针对 Chrome
2-5：注释属于注释节点
JavaScript 操作DOM对象的更多相关文章
- javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- JavaScript操作DOM对象
js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
- 使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象
一.DOM操作分类 使用JavaScript操作DOM时通常分为三类:DOM Core.HTMl--DOM和CSS-DOM 二.访问节点 节点属性 三.节点信息 四.操作节点的属性 语法: ge ...
- accp8.0转换教材第7章JavaScript操作DOM对象理解与练习
程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素 一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点 ...
- 第三章 JavaScript操作Dom对象
常用的方法: 1.访问节点: 通过Document.getElementByXXX()获得一个指定节点-->再通过以下属性节点访问节点:第一部分:节点属性a:parentNode 返回节点的父节 ...
- JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
随机推荐
- ionic 页面传递参数
1.使用AngularJS自带的$cacheFactory服务 $cacheFactory 从字面直译即为缓存工厂,可以用它来生成缓存对象,缓存对象以key-value的方式进行数据的存储,在整个应用 ...
- linux中tar命令（打包、压缩、解压）、zip和unzip、rar多种压缩文件
一.名词解释 打包:将一大堆文件或目录变成一个总的文件[tar命令] 压缩:将一个大的文件通过一些压缩算法变成一个小文件[gzip,bzip2等] Linux中很多压缩程序只能针对一个文件进行压缩,这 ...
- Adobe Photoshop CC 2018 v19.0 简体中文正式版下载安装破解(附注册机+破解教程) 32/64位（安装破解注意事项是什么）
Adobe Photoshop CC 2018 v19.0 简体中文正式版下载安装破解(附注册机+破解教程) 32/64位(安装破解注意事项是什么) 一.总结 一句话总结:下载安装破解教程文中都有,需 ...
- codeforces590b//Chip 'n Dale Rescue Rangers//Codeforces Round #327 (Div. 1)
题意:从一点到另一点,前t秒的风向与t秒后风向不同,问到另一点的最短时间 挺难的,做不出来,又参考了别人的代码.先得到终点指向起点的向量,设T秒钟能到.如果T>t则受风1作用t秒,风2作用T-t ...
- 关于Handler中Message的创建问题
Message用来定义一个包含任意数据的消息对象,这个消息对象是可以被发送给Handler处理的. 我们最好通过Message.obtain()和Handler.obtatinMessage()来得到 ...
- 解决无法安装Microsoft .Net Framework 3.5
如果解决不了,试试我的方法吧,我也在网上找了好久,最终在本地解决了 所需工具:dism,和Net Framework 3.5,已经打包 链接:https://pan.baidu.com/s/1nKok ...
- jqGrid 刷新单行数据
id: 单挑数据的id jQuery('#special-table').jqGrid( 'setRowData',id,{ status: '3', //所要修改的列 act: '<a dat ...
- java中equals与==的比较
总结来说: 1)对于==,如果作用于基本数据类型的变量,则直接比较其存储的 “值”是否相等: 如果作用于引用类型的变量,则比较的是所指向的对象的地址 2)对于equals方法,注意:equals方法不 ...
- Wannafly挑战赛27-A/B
链接:https://www.nowcoder.com/acm/contest/215/A来源:牛客网 题目描述 “White shores, and beyond. A far green coun ...
- linux -- 基于zookeeper搭建yarn的HA高可用集群
linux -- 基于zookeeper搭建yarn的HA高可用集群 实现方式:配置yarn-site.xml配置文件 <configuration> <property> & ...