js DOM

可读可写属性指的是不仅能通过js获取该属性的值，还能够通过js为该属性赋值。

查找节点

document.querySelector(selectors) // 接受一个CSS选择器作为参数，返回第一个匹配该选择器的元素节点。

document.querySelectorAll(selectors) //接受一个CSS选择器作为参数，返回所有匹配该选择器的元素节点。

document.getElementsByTagName(tagName) //返回所有指定HTML标签的元素

document.getElementsByClassName(className) //返回包括了所有class名字符合指定条件的元素

document.getElementById(id) //返回匹配指定id属性的元素节点。

document.getElementsByName(name) // 用于选择拥有name属性的HTML元素

document.elementFromPoint(x,y) //返回位于页面指定位置最上层的Element子节点。

宽高api

scrollTop: 元素被卷起的高度

clientHeight: 可视部分高度

1. clientWidth、clientHeight 可视部分宽度和高度(padding+content) 只读属性

clientWidth、clientHeight 如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高

clientTop、clientLeft border的宽度和高度

2. offsetWidth、offsetHeight 可视宽度和高度(border+padding+content) 只读属性

offsetLeft、offsetTop 当前元素，相对于其offsetParent(离自己最近的具有定位的absolute或者relative的父级元素)左边距离和上边距离 只读属性

说到这对属性就需要说下offsetParent,所谓offsetParent指的是当前元素的离自己最近的具有定位的（position:absolute或者position：relative）父级元素（不仅仅指的是直接父级元素，只要是它的父元素都可以），该父级元素就是当前元素的offsetParent，如果从该元素向上寻找，找不到这样一个父级元素，那么当前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是当前元素，相对于其offsetParent左边距离和上边距离，即当前元素的border到包含它的offsetParent的border的距离

3. scrollHeight、scrollWidth 元素内部内容的实际宽度和高度

scrollHeight、scrollWidth 当元素内部的内容超出其宽度和高度的时候，元素内部内容的实际宽度和高度，需要注意的是，当元素其中内容没有超过其高度或者宽度的时候，该属性是取不到的 只读属性

scrollTop和scrollLeft 指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度。可读写

document.body.offsetWidth 网页可以滑动的区域

window.screen.availWidth 空白区域（可用区域：显示的屏幕 除掉上面的工具栏（浏览器的标签）和下面的工具栏（电脑的菜单））

window.screen.Width 显示器的宽和高，也就是电脑的分辨率

添加和删除 class

• 1. classList
  • (1) DOM.classList.add("类名") // 添加
  • (2) DOM.classList.remove("类名") // 删除
• 2. setAttribute

  获取 Dom 的 class 属性: var classVal = document.getElementById("id").getAttribute("class");

  // 删除的话
  classVal = classVal.replace("someClassName", "");
  document.getElementById("id").setAttribute("class", classVal);
  

  //添加的话
  classVal = classVal.concat("someClassName");
  document.getElementById("id").setAttribute("class", classVal);
  

  //替换的话
  classVal = classVal.replace("someClassName", "otherClassName");
  document.getElementById("id").setAttribute("class", classVal);