一.什么是DOM

　　DOM是用来操作页面，如div的获取，修改样式

二.DOM节点

　　标签（css）=元素（js）=节点（DOM）

1.子节点 childNodes 仅算父元素下的第一层

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
window.onload=function() {
var oUl=document.getElementById('ul1');
alert(oUl.childNodes.length);
for (var i = 0; i < oUl.childNodes.length; i++) {
alert(oUl.childNodes[i].nodeType);
if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background='red';
}
}
}//算节点个数，判断节点类型，改变节点背景颜色
</script>
</body>
</html>

引出问题：

节点类型 节点分为文本节点（即为空节点） 与元素节点（<></>）

nodeType  nodeType=3-->文本节点   nodeType=1-->元素节点

在ie6~8中忽略文本节点，而ie9、谷歌等不会忽略文本节点

解决兼容性问题可用if--else

也可直接用children 代码如下

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
window.onload=function() {
var oUl=document.getElementById('ul1');
alert(oUl.children.length);
}
</script>
</body>
</html>//算节点个数

2.父节点 parentNode

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<ul id="ul1">
<li>fgergerg<a href="#">隐藏</a></li>
<li>weete<a href="#">隐藏</a></li>
<li>rrtret<a href="#">隐藏</a></li>
<li>sergh<a href="#">隐藏</a></li>
<li>ehkuyr<a href="#">隐藏</a></li>
</ul>
<script type="text/javascript">
window.onload=function() {
var aA=document.getElementsByTagName('a');

for (var i = 0; i < aA.length; i++) {
aA[i].onclick=function()
{
this.parentNode.style.display='none';
}
}
}
</script>
</body>
</html>//隐藏<li>

引出：offsetParent--->用来判断某个元素定位的父级

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#div1{
background-color: blue;width: 200px;height: 200px;margin:100px;/*position: relative;*/
}
#div2{
background-color: red;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
<script type="text/javascript">
window.onload=function() {
var oDiv2=document.getElementById('div2');
alert(oDiv2.offsetParent);
}
</script>
</body>
</html>//判断div2所用来定位的父元素

3.首尾节点，兄弟节点

有兼容性

firstChild   lastChild首尾

nextSibling   previousSibling兄弟节点

解决方法

firstElementChild   lastElementChild首尾

nextElementSibling   previousElementSibling兄弟节点

4.DOM获取元素

获取getAttribute（名称）

设置setAttribute（‘属性名’，值）

删除removeAttribute（名称）

5.用className选择元素

特征：可批量，有选择性，页面发生变化不会出错

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li class="box"></li>
</ul>
<script type="text/javascript">
function getByClass(oParent,sClass)
{
var aResult=[];
var aEle=oParent.getElementsByTagName('*');

for (var i = 0; i < aEle.length; i++) {
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload=function () {
var oUl=document.getElementById('ul1');
var aBox=getByClass(oUl,'box');

for (var i = 0; i < aBox.length; i++) {
aBox[i].style.background='red';
}
}
</script>
</body>
</html>

javascript之DOM篇一的更多相关文章

  1. javascript之DOM篇二（操作）

    一.创建DOM元素 createElement:document.createElement(' 所要创建的元素标签名'): <!DOCTYPE html><html>< ...

  2. javascript 之DOM篇

    要怎么样的开场白才能使我有力气再更新学习进度呢?啊啊啊啊啊,表示好累啊~~~默念“棒棒棒,我最棒~”召唤精气神开总结敲字咯.哈哈哈. --------------------------------- ...

  3. 前端开发之JavaScript HTML DOM理论篇一

    主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改 一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTM ...

  4. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  5. 第十五章：Python の Web开发基础 (二) JavaScript与DOM

    本課主題 JavaScript 介绍 DOM 介绍 JavaScript 介绍 JavaScript 是一门编程语言,它可以让网页动起来的,JavaScript 的变量有两种,一个是局部变量:一个是全 ...

  6. JavaScript之DOM创建节点

    上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...

  7. JavaScript之DOM对象的获取

    之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...

  8. JavaScript与DOM（上）

    本来像自己写一篇的...结果看到了Tom uncle的这篇..总结的确实很赞,其他文章也非常好推荐 转载自:http://www.cnblogs.com/TomXu/archive/2011/12/1 ...

  9. JavaScript性能优化篇js优化

    JavaScript性能优化篇js优化   随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...

随机推荐

  1. 浙江理工2015.12校赛-A

    孙壕请一盘青岛大虾呗 Time Limit: 5 Sec Memory Limit: 128 MB Submit: 577 Solved: 244 Description 话说那一年zstu与gdut ...

  2. JAVA基础知识之JDBC——ResultSet的滚动和更新(statement的额外参数)

    ResultSet不仅可以内存中的一张二维表一样保存statement执行SQL的结果集,还能通过结果集修改DB的数据.ResultSetMetaData则可以用来获得ResultSet对象的相关信息 ...

  3. WPFの三种方式实现快捷键

    最近,对wpf添加快捷键的方式进行了整理.主要用到的三种方式如下: 一.wpf命令: 资源中添加命令 <Window.Resources> <RoutedUICommand x:Ke ...

  4. 在Outlook中修改IMAP邮件账户的存储位置

    使用Outlook收发邮件,但是不想把邮件保存在默认的C盘. 对于POP3账户,Outlook提供了变更数据文件目录的方法,但是IMAP账户无法修改. 网上搜索了很多资料,终于找到一个可行的办法,整理 ...

  5. 嵌入式之Linux系统裁剪和定制---（kernel+busyboxy+dropbear+nginx）

    本文将介绍通过完全手动定制内核,在此基础上添加 busybox ,并实现远程登陆,使裁剪的 linux 能够运行 nginx . 在此之前介绍一下 linux 系统的启动流程. linux系统启动流程 ...

  6. 【RabbitMQ】RabbitMQ在Windows的安装和简单的使用

    版本说明 使用当前版本:3.5.4 安装与启动 在官网上下载其Server二进制安装包,在Windows上的安装时简单的,与一般软件没什么区别. 安装前会提示你,还需要安装Erlang,并打开下载页面 ...

  7. U9单据UI开发--单据类型UI开发

    1.在解决方案下新建UI界面项目,命名以UI作为后缀 2.先删除系统默认新建的UI界面数据模型,并新建界面数据 3.新建单据类型UIModel(界面数据),以model作为界面数据后缀名 4.修改单据 ...

  8. 简单说一下printf("%*s%s",xx,xx,xx);或printf("%*s\n",xx,xx);

    大家还记得这个例子吗 #include "public.h" int main() { ; printf("%4d\n",a); ; } 这个输出结果为:    ...

  9. JS历史

    JavaScript伴随着互联网的发展一起发展.互联网周边技术的快速发展,刺激和推动了JavaScript语言的发展. 2006年,jQuery函数库诞生,作者为John Resig.jQuery为操 ...

  10. Google Analytics与百度统计原理

    Google Analytics与百度统计的统计数据都是有差异的,而且差异非常大,其根本原因在于数据统计的原理和机制是不同的.下面分享一下两位博友李鑫和赵高欣对Google Analytics与百度统 ...