Javascript-基础知识（4）

1.回顾: 上篇学习了，匿名函数和闭包，js面向对象及原型  ，BOM

2.这篇学习 浏览器检测 ，DOM  ，动态加载样式

3.浏览器检测

• 1)navigator对象：常用的属性或方法：
  navigator.appName 浏览器的名称,取得浏览器名称不精确！
  navigator.userAgent 浏览器用户信息字符串
  navigator.appVersion 浏览器版本
  navigator.platform 所在的系统
  navigator.plugins 检测插件(IE无法检测，IE的话需要检查控件是否存在！):
  e.g:
  
  

  for(i=0;i<navigator.plugins.length;i++){shu('插件名称：'+navigator.plugins[i].name);shu('文件名：'+navigator.plugins[i].filename);shu('插件描述：'+navigator.plugins[i].description);shu('');}

  
  
  
• 2)代码检测浏览器名称版本系统：浏览器嗅探器： 下载BrowserDetect的js库，来调用检测；
• 3)客户端检测：能力检测，怪癖检测(bug检测)，用户代理检测.
• 4)具体客户端检测：查源代码，调用！

4.DOM基础

• DOM:Document Object Model 文档对象模型，针对html和xml文档的api。模型可以理解为网页文档的树形结构。
• 树形结构是有节点组成的，也叫元素。
  节点分为三类：1.元素节点：就是标签 2.文本节点：其实就是标签内的内容 3.属性节点
  Dom操作文档的时候，需要html操作完成后，才能操作和获取
• getElementById() : 参数传递一个元素的id值，这样就获得到了，这个标签。
• window.onload=function(){ 这里是执行的代码 }; ： 用来等html加载完毕后再执行代码
• e.g :

测试

function shu(content){console.log(content);}window.onload=function(){var box=document.getElementById('div1'); //获取id为div1的标签shu(box);shu(box.tagName); //获取这个元素节点的标签名shu(box.innerHTML); //获取标签元素节点里的文本shu(box.id); //获取标签元素id属性的值，注意不是属性节点shu(box.style); //获取样式shu(box.style.color); //获取样式里的值shu(box.className); //获取类名box.innerHTML='yuan'; //设置文本内容，可以解析HTML内容box.style.color='green'; //设置样式};

• getElementsByTagName() :返回一个对象数组的集合
• e.g:
  

  var li=document.getElementsByTagName('li');for(i=0;i<li.length;i++){shu(li[i].innerHTML);}

  
  
  
  
• getElementsByName() : 参数为 标签属性name的值,返回集合
• 标签属性操作getAttribute() , setAttribute()和removeAttribute()
• e.g :
  

  //获取body对象节点var body=document.getElementsByTagName('body')[0];shu(body);//获取全部网页内容var html=document.getElementsByTagName('*');shu(html);//通过name来获取标签内容,input 标签有name属性，可以操作var box1=document.getElementsByName('div1')[0];shu(box1.innerHTML)//标签属性操作getAttribute() , setAttribute()和removeAttribute()var box2=document.getElementById('div1');shu(box2.getAttribute('style'));shu(box2.getAttribute('class')); //IE不支持shu(box2.getAttribute('className')); //IE支持，其他不支持shu(box2.onclick); //获得属性中的事件box2.setAttribute('title','yuan');box2.removeAttribute("name"); //移除属性 IE6及其低版本不支持

  
  
  
• 层次节点：父子节点，兄弟节点
• e.g :
  

  var box=document.getElementById('div1');shu(box.nodeName); //获取元素节点的标签名，和tagName一样shu(box.nodeType); //获取元素节点的类型值//层次节点shu(box.childNodes); //返回元素节点的子节点列表（NodeList集合）shu(box.childNodes[0].nodeType); //表示文本节点shu(box.childNodes[2].nodeValue); //表示文本节点的文本内容shu(box.childNodes[2].nodeName); //表示文本节点名称shu(box.firstChild.nodeValue); //获取第一个子节点的文本内容shu(box.lastChild.nodeValue); //获取最后一个子节点的文本内容shu(box.ownerDocument); //返回文档对象shu(box.firstChild.nextSibling.nodeName); //得到同级节点的下一个节点shu(box.lastChild.previousSibling.nodeName); //得到同级节点的上一个节点shu(box.attributes); //保存中这个元素节点的属性列表shu(box.attributes.length);shu(box.attributes[1].nodeType);

  
  
  
• 节点操作:
  

  document.write('yuan'); //输出一句话，用于测试document.createElement('p'); //创建一个节点pbox.appendChild(p); //给div1追加 子节点

  
  
  等

5.DOM进阶

• Node类型：
  nodeType ：
  ElEMENT_NODE 元素 返回 1
  .
  .
  .
  e.g :
  

  shu(Node); //objectshu(Node.ELEMENT_NODE); //表示元素节点类型值shu(Node.TEXT_NODE); //表示文本节点类型值//做判断，是什么类型//if(xxx.nodeType===Node.ELEMENT_NODE){}

  
  
  
• document 类型
• e.g :
  
  

  shu(document.nodeType); //文档根，nodeType：节点类型值：9shu(document.title);//标题shu(document.URL);//当前域名shu(document.domain); //获得当前域名shu(document.refer); //获取上一个域名地址shu(document.links); //获得a标签的href地址

  
  
  
• Text类型
• e.g :
  

  window.onload=function(){var box=document.getElementById('div1');//body宽度shu(document.body.clientWidth);//呈现方式：可以设置锚点document.getElementById('div1').scrollIntoView();//忽略掉空白节点shu(box.children.length);//判断子节点shu(box.contains(box.firstChild));//判断box不是不p的父节点//获取文本，直接过滤掉了htmlshu(box.innerText);//获取内容,不过滤html（最常用）shu(box.innerHTML);//类似的还有outerHTML() 和 outerText() 会将元素抹去};

  
  
  

6.DOM操作表格及样式

• 操作表格：
• e.g :DOM建立表格
  
  

  window.onload=function(){var table=document.createElement('table');table.border=1;table.width=400;var caption=document.createElement('caption');table.appendChild(caption);caption.innerHTML='班级表';var thead=document.createElement('thead');table.appendChild(thead);var tr=document.createElement('tr');thead.appendChild(tr);var th=document.createElement('th');tr.appendChild(th);th.innerHTML='班级';var th1=document.createElement('th');tr.appendChild(th1);th1.innerHTML='姓名';var th2=document.createElement('th');tr.appendChild(th2);th2.innerHTML='年龄';document.body.appendChild(table);};

  
  
  
• 用DOM来创建表格十分繁琐，故用HTMLDOM来操作表格,见参考手册！
• 样式1：
• e.g : //对浏览器检测对css的能力检测
  

  shu(document.implementation.hasFeature('CSS','2.0'));//获取行内的css样式，内联或链接的获取不到var box=document.getElementById('div1');shu(box.style)shu(box.style.fontSize);box.style.fontSize='80px';

  
  
  
• DOM样式：css和getBoundingClientRect()方法
• e.g :
  

  window.onload=function(){var box=document.getElementById('div1');//获得元素的实际大小，默认为px,内边距和滚动条会影响大小shu(box.clientWidth);shu(box.clientHeight);//元素滚动实际大小shu(box.scrollWidth);shu(box.scrollHeight);//获得元素的实际大小,比较稳定shu(box.offsetWidth);shu(box.offsetHeight);//获取元素周边大小shu(box.offsetLeft);shu(box.offsetTop);var box=document.getElementById('div1');//获得元素的大小等信息：获得的是一个矩形对象，常用shu(box.getBoundingClientRect());};

  
  
  

7.动态加载脚本和样式

• 当网站需求变大，脚本的需求也逐步变大，就需要动态加载脚本了。
• e.g ：
  
  

  window.onload=function(){//动态加载，需要时间onloadScript('js/demo1.js');//延迟2s测试setTimeout(function(){shu(demoTest().name);},2000);};function onloadScript(url){var script= document.createElement('script');script.type='text/javascript';script.src=url;document.head.appendChild(script);}