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);
}


标签：

相关文章