• 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);
  • 相关阅读:
    Sql:主表与子表的最新记录级联查询
    发现eclipse红叉,查看markers发现Target runtime Apache Tomcat 6.0 is not defined
    The required Server component failed to start so Tomcat is unable to start问题解决
    Spring官网下载dist.zip的几种方法
    SPRING---------配置文件的命名空间
    eclipse中egit插件使用
    eclipse不自动弹出提示(alt+/快捷键失效)
    使用jenkins配置.net mvc网站进行持续集成
    windows系统的便签
    Linq to Entity 动态拼接查询条件(重点是OR)
  • 原文地址:https://www.cnblogs.com/leroywang/p/12074973.html
Copyright © 2020-2023  润新知