常用JS

最近鼓捣FusionApp，帮别人鼓捣网页js，把常用的js在这里做一下记录。想起来什么写什么，可能不准确。

总结的是原生JS，通用于各个网站

获取元素：

以下语句从头开始或从上一个语句的”;”后开始，index值为整数值。

通过ID选择元素，仅会选择页面中的1个元素。

document.getElementById("元素ID")

通过class选择元素，选择时返回全部符合条件的元素，通过index选择第几个（0开始）

document.getElementsByClassName("class名")[index]

通过标签名选择元素，选择时返回全部符合条件的元素，通过index选择第几个（0开始）

document.getElementsByTagName("标签名")[index]

通过css的选择器选择元素，返回第一个符合条件的元素，选择时可以综合各种参数

标签名：直接写标签名
class名：.class名
ID：#id
使用时可以三项结合。另外特殊属性可以在上述元素后加[属性名]或[属性名=属性值]方法选择
兼容css语法如：空格” “，”>”，逗号”,”，具体含义请百度

CSS选择器参考网址: CSS选择器参考手册>>

document.querySelector("选择器")

通过css的选择器选择元素，使用方法与上面完全相同，但返回全部符合条件元素。使用index选择第几个。

document.querySelectorAll("选择器")

子选择器：

以下字符需要拼接在上面选择器的后面组成js语句。

查找所有子节点，通过index选择第几个（0开始）[注意，此项返回的时候包含非元素项目]

.childNodes[index]

返回首个子节点(可能不是元素)

.firstChild

返回最后一个子节点(可能不是元素)

.lastChild

返回首个子元素节点

.firstElementChild

返回最后一个子元素节点

.lastElementChild

返回当前节点的下一个节点（可能不是元素）

.nextSibling

返回当前节点的上一个节点（可能不是元素）

.previousSibling

返回当前节点的下一个元素节点

.nextElementSibling

返回当前节点的上一个元素节点

.previousElementSibling

常用操作：

以下字符需要写在上面选择字符的后面拼合js语句。

dom操作：

此类操作会修改dom，请不要再循环中直接使用。

删除：

.remove();

class操作：

偶尔有些时候删除特殊的类名就可以让多余的设置消失。

获得class（字符串，空格分割）

.className

获得class（数组）

.classList

清空class

.className="";

指定固定class

.className="指定class，空格分割";

删除特定class：

.classList.remove("类名");

添加特定class：

.classList.add("类名");

样式操作：

此类操作可以在属性值后加”!important”提高属性值的优先级。

隐藏：

.style.display="none";

透明：

.style.opacity="0";

扔出屏幕：

此步骤需要分两步。下面两行每行都需要组合一次选择元素的语句。

.style.position="fixed";
.style.left="-1000px";

删除内部留白：

.style.padding="0";

但是大部分情况下只需要调整一侧的留白：
上：

.style.paddingTop="0";

下：

.style.paddingBottom="0";

左

.style.paddingLeft="0";

右：

.style.paddingRight="0";

删除外部留白：

.style.margin="0";

但是大部分情况下只需要调整一侧的留白：
上：

.style.marginTop="0";

下：

.style.marginBottom="0";

左:

.style.marginLeft="0";

右：

.style.marginRight="0";

示范

删除一个id为abc的元素

document.getElementById("abc").remove();

隐藏一个属性dpr为1的ul元素

document.querySelector("ul[dpr=1]").style.display="none";