Javascript-基础知识(4)

时间:2022-08-22 17:25:41

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'); //创建一个节点p
    box.appendChild(p); //给div1追加 子节点


5.DOM进阶

  • Node类型:
    nodeType :
    ElEMENT_NODE 元素 返回 1
    .
    .
    .
    e.g :
    shu(Node); //object
    shu(Node.ELEMENT_NODE); //表示元素节点类型值
    shu(Node.TEXT_NODE); //表示文本节点类型值
    //做判断,是什么类型
    //if(xxx.nodeType===Node.ELEMENT_NODE){}


  • document 类型
  • e.g :

    shu(document.nodeType); //文档根,nodeType:节点类型值:9
    shu(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的父节点
    //获取文本,直接过滤掉了html
    shu(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);
    }