DOM基础：

　　什么是DOM：其实就是dovument，div获取、修改样式等等，但是不只是js的组成部分，而且还是一套规范，规定了这些浏览器怎么处理这些操作；

　　浏览器支持情况：IE（IE7-8，10%支持率，IE9跟火狐差不多）、Chrome（60%左右的支持率）、FF（99%的支持率）

DOM节点：其实标签（CSS）、元素（JS）、节点（DOM）意思一样，只不过在不同文件中的叫法不一样而已

　　childNodes　　nodeType

　　　　abcdefghijklmn...文本节点
　　　　<span>哈哈哈……</span>元素节点　　

　　　　获取子节点　　　　　　

  1. 　　　　<script>
  2. 　　　　　　　　window.onload=function(){
  3. 　　　　　　　　　　var oUL=document.getElementById('ul1');
  4. 　　　　　　　　　　alert(oUL.childNodes.length); //火狐、IE9等版本，返回值为5，但是在IE6-8返回的是2，即两个<li>标签
  5. 　　　　　　　　};
  6. 　　　　</script>　　　　　
  7.  
  8. 　　　　<ul id=”ul1”>   //该空白区及下一行标签前空白区域，属于第一个节点
  9.     　　　　<li>qqqq</li>      //本行标签属于第二个节点      //该空白区及下一行标签前空白区域，属于第三个节点
  10.     　　　　<li></li>   //本行标签属于第四个节点       //该空白区及下一行标签前空白区域，属于第五个节点
  11. 　　　　</ul>

　　需要注意的是，节点没有style样式的（但是在IE7，文本节点会有样式，即可在JS中修改“节点”样式），但是所有节点会有一个nodeType（节点类型）　　　　

  1. 　　<script>
  2. 　　　　　　window.onload=function(){
  3. 　　　　　　　　var oUL=document.getElementById('ul1');
  4. 　　　　　　　　for (var i=0; i<oUl.childNodes.length; i++){
  5. 　　　　　　　　　　//oUL.childNodes[i].style.background='red'; //修改样式无果，因为节点没有样式
  6. 　　　　　　　　　　// alert(oUL.childNodes[i].nodeType); //nodeType=3表示文本节点共3个；nodeType=1表示元素节点，共2个。
  7. 　　　　　　　　　　if (oUL.childNodes[i].nodeType==1){
  8. 　　　　　　　　　　　　oUL.childNodes[i].style.background='red';
  9. 　　　　　　　　　　}
  10. 　　　　　　　　}
  11. 　　　　　　};
  12. 　　</script>
  13.  
  14.  　　<ul id=”ul1”> //该空白区及下一行标签前空白区域，属于第一个节点
  15. 　　　　<li>qqqq</li> //本行标签属于第二个节点 //该空白区及下一行标签前空白区域，属于第三个节点
  16. 　　　　<li></li> //本行标签属于第四个节点 //该空白区及下一行标签前空白区域，属于第五个节点
  17. 　　</ul>

　　children属性，比childNodes更方便，它与childNodes很相似，但是最大的不同是，children属性只包括元素，不包括文本，而且在<li>标签内的节点只属于<li>的子节点，而不属于<ul>的子节点 　　　　

  1. <script>
  2.     window.onload=function(){
  3.         var oUL=document.getElementById('ul1');
  4.         alert(oUL.children.length); 　　//返回值为2，表示两个<li>标签
  5.     };
  6. </script>

　　parentNode：父节点，如上面代码<ul>是<li>的父节点　　　　

  1. var oUL=document.getElementById('ul1');
  2. alert(oUL.parentNode); //返回值为[object HTMLBodyElement] 即body标签

　　　 例子——点击链接，隐藏整个li：　　　　

  1.         <script>
  2. 　　　　　　window.onload=function(){
  3. 　　　　　　　　var aA=document.getElementsByTagName('a');
  4. 　　　　　　　　for(var i=0; i<aA.length; i++){
  5. 　　　　　　　　　　aA[i].onclick=function(){
  6. 　　　　　　　　　　　　this.parentNode.style.display='none';
  7. 　　　　　　　　　　};
  8. 　　　　　　　　}
  9. 　　　　　　};
  10. 　　　　</script>
  11.  
  12. 　　　　<ul id="ul1">
  13. 　　　　　　<li>aaaaa<a href="javascript:;">隐藏</a></li>
  14. 　　　　　　<li>bbbbb<a href="javascript:;">隐藏</a></li>
  15. 　　　　　　<li>ccccc<a href="javascript:;">隐藏</a></li>
  16. 　　　　　　<li>ddddd<a href="javascript:;">隐藏</a></li>
  17. 　　　　　　<li>eeeee<a href="javascript:;">隐藏</a></li>
  18. 　　　　　　<li>fffff<a href="javascript:;">隐藏</a></li>
  19. 　　　　</ul>

　　offsetParent：例子——获取元素在页面上的实际位置

　　　　补充：CSS中绝对定位的元素，是根据谁定位的呢，它是根据有定位的父级来进行定位的，比如说，某个元素节点直接父级没有定位，则往上找，即找其父级的父级是否有定位，依次往上找，如果一直没有，直至找到<body>为止，

　　　　offsetParent：就是用来寻找某一个元素，用来定位的父级，如果一直没有，直到找到<body>为止　　　　

  1.         <style>
  2. 　　　　　　#div1{width: 200px; height: 200px; background: #cccccc; margin: 100px; position: relative;}
  3. 　　　　　　#div2{width: 100px;height: 100px;background: red; position: absolute; left: 50px; top: 50px;}
  4. 　　　　</style>
  5. 　　　　<script>
  6. 　　　　　　window.onload=function () {
  7. 　　　　　　　　var oDiv2=document.getElementById('div2');
  8. 　　　　　　　　alert(oDiv2.offsetParent); //返回[object HTMLDivElement]，当去掉#div1的相对定位返回的值即为[object HTMLBodyElement]
  9. 　　　　　};
  10. 　　　　</script>
  11. 　　　　<body>
  12. 　　　　　　<div id="div1"><div id="div2"></div></div>
  13. 　　　　</body>

　　首位子节点：firstChild：第一个子节点（适用于IE6-8等低版本浏览器）、firstElementChild：第一个子节点（适用于IE9以上等高版本浏览器）、lastChild：最后一个子节点（适用于IE6-8等低版本浏览器）、lastElementChild（适用于IE9以上等高版本浏览器）；所以有兼容性问题　　

  1. var oUl=document.getElementById('ul1');
  2. 　　// oUl.firstChild.style.background='red';  //适用于IE6-8等低版本浏览器
  3. 　　// oUl.firstElementChild.style.background='red';   //适用于高版本等高级浏览器
  4. 　　// 为了解决兼容问题，可以用以下方法：
  5. 　　if (oUl.firstElementChild){     //如果oUl.firstElementChild存在，则执行
  6.    　　 oUl.firstElementChild.style.background='red';
  7. 　　} else {    //否则执行
  8.     　　oUl.firstChild.style.background='red';
  9. 　　}

　　兄弟节点：nextSibling：下一个兄弟节点（适用于IE6-8等低版本浏览器）、nextElementSibling下一个兄弟节点（适用于IE9以上等高版本浏览器）、previousSibling：上一个兄弟节点（适用于IE6-8等低版本浏览器）、previousElementSibling上一个兄弟节点（适用于IE9以上等高版本浏览器）；所以同上理，有兼容性问题　　

操纵元素属性：

　　语素属性操作：（三种方法效果一样）

　　　　第一种：oDiv.style.display="block";

　　　　第二种：oDiv.style["display"]="block";

　　　　第三种：DOM方式： oDiv.setAttribute('dispaly', 'block');　　　　

　　DOM方式操作元素属性：

　　　　获取：getAttribute(名称)

　　　　设置：setAttribute(名称, 值)

　　　　删除：removeAttribute(名称)

DOM元素灵活查找：

　　前面讲过获取元素的方法有：getElementById();  getElementsByTagName();

　　用className选择元素：

　　　　如何用className选择元素

　　　　　　选出所有元素

　　　　　　通过className条件筛选　　　　　　

  1.           var oUl=document.getElementById('ul1');
  2. 　　　　　　var aLi=oUl.getElementsByTagName('li');
  3.  
  4. 　　　　　　for (var i=0; i<aLi.length; i++){
  5. 　　　　　　　　if (aLi[i].className=='box'){
  6. 　　　　　　　　　　aLi[i].style.background='red';
  7. 　　　　　　　　}
  8. 　　　　　　}

　　　　封装成函数 　　　　

  1.         //把获取元素className属性的代码封装成一个函数
  2. 　　　　function getByClass(oParent, sClass){
  3. 　　　　　　var aResult=[]; //定义空数组，作用是把所有找到的元素放入该数组中
  4. 　　　　　　var aEle=oParent.getElementsByTagName('*'); //其中 * 表示通配符，表示获取所有
  5.  
  6. 　　　　　　for (var i=0; i<aEle.length; i++){
  7. 　　　　　　　　if (aEle[i].className==sClass){ //筛选满足调剂的标签
  8. 　　　　　　　　　　aResult.push(aEle[i]);
  9. 　　　　　　　　}
  10. 　　　　　　}
  11. 　　　　　　return aResult;
  12. 　　　　}
  13.  
  14. 　　　　window.onload=function(){
  15.  
  16. 　　　　　　var oUl=document.getElementById('ul1');
  17.  
  18. 　　　　　　var aBox=getByClass(oUl, 'box');
  19. 　　　　　　for (var i=0; i<aBox.length; i++){
  20. 　　　　　　　　aBox[i].style.background='red';
  21. 　　　　　　}
  22. 　　　　};

第五讲 DOM基础的更多相关文章

  1. HTML DOM基础知识

    HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...

  2. Javascript DOM基础（一）概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  3. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

  4. js入门——Dom基础

    DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...

  5. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  6. DOM基础（四）

    每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...

  7. DOM基础（二）

    在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...

  8. python学习第五讲,python基础语法之函数语法,与Import导入模块.

    目录 python学习第五讲,python基础语法之函数语法,与Import导入模块. 一丶函数简介 1.函数语法定义 2.函数的调用 3.函数的文档注释 4.函数的参数 5.函数的形参跟实参 6.函 ...

  9. BOM基础 计时器 定时器 DOM 基础

    -------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...

随机推荐

  1. TortoiseGit功能介绍

    TortoiseGit功能介绍 使用方便 强大的提交对话框 每个项目设置 最小日志消息长度,以避免意外提交空日志消息 用于拼写检查的语言 与问题跟踪系统集成 有用的工具 有多种语言版本 Tortois ...

  2. 转载：margin外边距合并问题以及解决方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 转载>>C# Invoke和BeginInvoke区别和使用场景

    转载>>C# Invoke和BeginInvoke区别和使用场景 一.为什么Control类提供了Invoke和BeginInvoke机制? 关于这个问题的最主要的原因已经是dotnet程 ...

  4. 联想R720面板右下部分按压后和上面按键串联了

    如图所示的位置,一用力按压,就会触发键盘的按键. 前提: 本人刚刚加装了内存条,内存条是京东买的 十铨(Team) DDR4 2400 8GB 笔记本内存,安装完内存以后,发现电脑出了这样的问题. 解 ...

  5. ubuntu中安装blogPost

    1.实验环境 Ubuntu16.04x86 2.安装blogPost步骤 2.1 安装方式比较简单,打开ubuntu软件中心 2.2 搜索DB Browser for SQLite,点击安装即可 上图 ...

  6. thinkphp5中使用PHPExcel(转载)

    thinkphp5中可以使用composer来获取第三方类库,使用起来特别方便,例如:可是使用composer下载PHPMailer,think-captcha(验证码)等等…… 接下来说一下怎么使用 ...

  7. elk-Kibana设置登录认证-通过nginx转发（六）

    一.kibana的登录认证问题 kibana是nodejs开发的,本身并没有任何安全限制,直接浏览url就能访问,如果公网环境非常不安全,可以通过nginx请求转发增加认证,方法如下: tips:ki ...

  8. mui APP与服务器之间的交互原理

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. vue-router 进阶

    简单回顾一下vue基础部分 动态路由匹配 路由配置方法 export default new Router({ routes: [ { path: '/router01/:name', name: ' ...

  10. python中元组与数组的区别

    列表: a=['12', '3rr'] 元组: t=(21,34) 列表可以修改,而元组不可以修改,如果元组中仅有一个元素,则要在元素后加上逗号. 元组和列表的查询方式一样. 元组只可读不可修改. 如 ...