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

 

 

 

 

上一篇:微信中使用popup等弹窗组件时点击输入框input键盘弹起导致IOS中按钮无效处理办法


下一篇:javaScript 与 jquery 滚动条触底 实现