JS实现移动端标签定位查找 X轴和Y轴

获取Dom

function AdvertisingPositions(val) {
    //在子元素中  找到统一的class名称  
    let yDYNvb = document.getElementsByClassName('yDYNvb');
   
    let datasetUrl = document.getElementsByClassName('yKd8Hd');
      // 与Dom内容要要匹配的参数
    let urlHost = val
   
  
    let dtld = '' 
    let childNodeCh = ""
    for(let i = 0 ; i < datasetUrl.length ; i++ )   {
          // 存储 遍历出来的 dom 参数 
        dtld = datasetUrl[i].innerHTML
    
             //匹配 形参是否 与dom参数 相匹配
        if( dtld.slice(0,val.length)===urlHost) {
            console.log('获得对应的链接',dtld.slice(8,dtld.length));
            let arrIn=[yDYNvb[i]]
          //存储的到的Dom
             childNodeCh = [arrIn[0]]
        
        
        } 
    }
    if(childNodeCh.length>0) {
    // 遍历Dom 调取获取位置 
      for(let  z = 0 ; z< childNodeCh.length ; z ++) {
        console.log('坐标==',getBound(childNodeCh[z]));
      }
    }else {
        console.log("没有匹配到url");
    }
     
}

//  查询当前 标签内的链接
AdvertisingPositions('https://www.---.com')

获取DOM位置

知识点

• getBoundingClientRect()

获取元素位置可以用 offset 或 getBoundingClientRect，使用 offset 因为兼容性不好，比较麻烦，offset获取位置会形成“回溯”。而 getBoundingClientRect 方法则
兼容性较好，基本所有的浏览器都支持了，且使用起来更容易和简单。

1.使用语法：

element.getBoundingClientRect();
方法中没有任何参数，返回值为对象类型。

2.在IE8及以下的浏览器中，返回值对象包含的属性值有：

top:：元素上边缘距离文档顶部的距离；

right： 元素右边缘距离文档左边的距离；

bottom：元素下边缘距离文档顶部的距离；

left：元素左边缘距离文档左边的距离；

3.在IE9以上、谷歌、火狐等浏览器中，返回值对象包含的属性值有：

top： 元素上边缘距离文档顶部的距离；

right：元素右边缘距离文档左边的距离；

bottom：元素下边缘距离文档顶部的距离；

left：元素左边缘距离文档左边的距离；

width：元素的宽度（包含 padding 和 border）

height：元素的高度（包含 padding 和 border）

4.在IE8及以下浏览器没有 width 和 height 属性的解决方法：

在IE8及以下浏览器中，可以通过计算得到元素的宽和高：

如：

复制代码
var dom = document.querySelector(“#demo”),
r = dom.getBoundingClientRect();

var width = r.right - r.left;
var height = r.bottom - r.top;

• Math.floor
  向上取整
• Math.random()
  获取随机数
• _dom.offsetWidth
  垂直方向 height + 上下padding + 上下border-width

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
链接：👇🏻⚔
https://blog.csdn.net/hl971115/article/details/109530742?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166692958516782388062165%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=166692958516782388062165&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_click~default-1-109530742-null-null.142^v62js_top,201^v3add_ask,213^v1control&utm_term=getBoundingClientRect%28%29%20&spm=1018.2226.3001.4187

 
function getBound(dom) {
      
       if( [dom].length > 0) {
    var _dom = dom;
    var boundRect = _dom.getBoundingClientRect();
    
 
  
    var _x = boundRect.left + Math.floor(Math.random() * _dom.offsetWidth);
   
    // var _y = boundRect.top  + Math.floor(Math.random() * _dom.offsetHeight);
    // var _y = boundRect.top - Math.floor(Math.random() *(_dom.offsetHeight/2))
    var _y = boundRect.top - Math.floor(Math.random() *_dom.offsetHeight)-20
    // var _y = boundRect.top  -100
    return {
        x: Math.floor(_x),
        y: Math.floor(_y)
    }
} else{
    console.log("url_errorr")
}