JavaScript 7 获取可视窗口、网页元素、获取节点方式

获取可视窗口对象

chrom *document.body

firefox *document.documentElement

获取滚动条偏移量

ele.scrollTop

ele.scrollLeft

获取可视窗口对象

var bodyObj=document.documentElement||document.body;

var scrolltop=bodyObj.scrollTop;

设置滚动条偏移

bodyObj.scrollTop=123

//  通过可视窗口对象提供的scrollTop||scrollLeft属性获取滚动条偏移量

    setInterval(function(){
        var scrollTop_=bodyObj.scrollTop;
        bodyObj.scrollTop=scrollTop_+10;
    },30);

Dom操作方法

1、获取网页元素（网页中的节点）

ele.getElementById('id属性值')； 只返回第一个元素（网页中不能出现id值相同的两个元素）

ele.getElementsByTagNam('元素名称')；返回所有符合要求的节点，以节点数组形式

ele.getElementsByName('name的属性值')  返回所有复合要求的节点，以节点数组形式

ele.getElementsByClassName('class的属性值') 返回虽有复合要求的节点，以节点数组形式

var box1=document.getElementById('box1');
        var boxs=document.getElementsByClassName('box');
        var box_tag=document.getElementsByTagName('div');
        var box_name=document.getElementsByName('box3');
        var fbox=document.getElementsByClassName('fbox')[0];
        // 通过父元素调用getElement…………方法获取元素

  　　　　var box1_1=fbox.getElementsByClassName('box');

        var box1_2=fbox.getElementsByTagName('div');

根据选择器获取元素

querySelector(选择器)

querySelectorAll(选择器)

 // var boxs=document.querySelector('[name=box3]');
        var boxs=document.querySelector('#box1');
        // var boxs2=document.querySelectorAll('[name=box3]');
        var boxs2=document.querySelectorAll('#box1');

获取兄弟元素

nextSibling 获取下一个节点（包含文本节点）

nextElementSibling获取下一个节点（不包含文本）

previousSibling获取上一个节点

previousElementSibling获取上一个节点

获取子节点

laseChild 获取指定元素中的最后一个子节点，包含文本节点

laseElementChild获取指定元素中的最后一个元素节点。忽略文本节点

firstChild 获取指定元素中的第一个子节点（包含文本）

firstElementChild 获取指定元素中的第一个子节点（忽略文本）

获取所有子节点

childNodes 获取指定元素的所有子节点（包含非元素节点）

children 获取指定元素的所有（元素）子节点

根据子元素获取父元素

  console.log(fbox.parentNode);
    console.log(fbox.parentElement);