美文网首页
(浏览器)浏览器对象

(浏览器)浏览器对象

作者: 云木杉 | 来源:发表于2019-03-27 12:48 被阅读0次

    浏览器对象

    JavaScript可以获取浏览器提供的很多对象,并进行操作。

    window

    • window对象不但充当全局作用域,而且表示浏览器窗口。
    • window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。
    // 可以调整浏览器窗口大小试试:
    console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
    // 对应的,还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高。
    

    navigator

    navigator对象表示浏览器的信息,最常用的属性包括:

    console.log('appName = ' + navigator.appName); // 浏览器名称
    console.log('appVersion = ' + navigator.appVersion);  // 浏览器名称
    console.log('language = ' + navigator.language);  // 浏览器设置的语言
    console.log('platform = ' + navigator.platform);  // 操作系统类型
    console.log('userAgent = ' + navigator.userAgent);  // 浏览器设定的User-Agent字符串
    

    screen

    screen对象表示屏幕的信息,常用的属性有:

    • screen.width:屏幕宽度,以像素为单位;
    • screen.height:屏幕高度,以像素为单位;
    • screen.colorDepth:返回颜色位数,如8、16、24。
    console.log('Screen size = ' + screen.width + ' x ' + screen.height);
    

    location

    location对象表示当前页面的URL信息。例如,一个完整的URL:

    http://www.example.com:8080/path/index.html?a=1&b=2#TOP
    // 可以用location.href获取。要获得URL各个部分的值,可以这么写:
    location.protocol; // 'http'
    location.host; // 'www.example.com'
    location.port; // '8080'
    location.pathname; // '/path/index.html'
    location.search; // '?a=1&b=2'
    location.hash; // 'TOP'
    // 要加载一个新页面,可以调用location.assign()。如果要重新加载当前页面,调用location.reload()方法非常方便。
    if (confirm('重新加载当前页' + location.href + '?')) {
        location.reload();
    } else {
        location.assign('/'); // 设置一个新的URL地址
    }
    

    document

    document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节点。

    //用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点:
    
    var menu = document.getElementById('drink-menu');
    var drinks = document.getElementsByTagName('dt');
    var i, s, menu, drinks;
    
    menu = document.getElementById('drink-menu');
    menu.tagName; // 'DL'
    
    drinks = document.getElementsByTagName('dt');
    s = '提供的饮料有:';
    for (i=0; i<drinks.length; i++) {
        s = s + drinks[i].innerHTML + ',';
    }
    console.log(s); // 提供的饮料有:摩卡,酸奶,果汁,
    

    操作DOM

    由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。

    在操作一个DOM节点前,我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName(),以及CSS选择器document.getElementsByClassName()。

    // 返回ID为'test'的节点:
    var test = document.getElementById('test');
    
    // 先定位ID为'test-table'的节点,再返回其内部所有tr节点:
    var trs = document.getElementById('test-table').getElementsByTagName('tr');
    
    // 先定位ID为'test-div'的节点,再返回其内部所有class包含red的节点:
    var reds = document.getElementById('test-div').getElementsByClassName('red');
    
    // 获取节点test下的所有直属子节点:
    var cs = test.children;
    
    // 获取节点test下第一个、最后一个子节点:
    var first = test.firstElementChild;
    var last = test.lastElementChild;
    
    // 第二种方法是使用querySelector()和querySelectorAll(),需要了解selector语法,然后使用条件来获取节点,更加方便:
    
    // 通过querySelector获取ID为q1的节点:
    var q1 = document.querySelector('#q1');
    
    // 通过querySelectorAll获取q1节点内的符合条件的所有节点:
    var ps = q1.querySelectorAll('div.highlighted > p');
    

    严格地讲,我们这里的DOM节点是指Element,但是DOM节点实际上是Node,在HTML中,Node包括Element、Comment、CDATA_SECTION等很多种,以及根节点Document类型,但是,绝大多数时候我们只关心Element,也就是实际控制页面结构的Node,其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。

    相关文章

      网友评论

          本文标题:(浏览器)浏览器对象

          本文链接:https://www.haomeiwen.com/subject/zpqzvqtx.html