标签：元素 可视 JavaScript 获取 var scrollTop document 节点

获取可视窗口对象

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

 

 

 

 

标签：元素,可视,JavaScript,获取,var,scrollTop,document,节点
来源： https://www.cnblogs.com/leroywang/p/12074973.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。