FusionApp 常用JS

发布于 2018-04-01  89 次阅读


AI 摘要

文章摘要:本文介绍了FusionApp中常用的JS技巧,包括获取元素的方法和常用操作。通过使用原生JS,可以在各个网站中通用。其中包括通过ID、class、标签名、CSS选择器等方式获取元素,以及使用子选择器和常用操作对DOM进行操作。常用操作包括删除元素、操作class和样式等。示范代码也提供了一些具体的例子来演示如何使用这些技巧。

总结的是原生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();

隐藏一个属性dpr1ul元素

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