FusionApp 常用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";