原生JS语法-拾起记录

前端各种框架,有事还是会忘了原生的写法，这里记下

获取元素子节点

1.通过获取dom方式直接获取子节点 缺点：缺乏灵活性

var a = document.getElementById("test").getElementsByTagName("div");

2.通过childNodes获取子节点，获取的结果为子节点集合（伪数组，会把换行和空格也当成是节点信息。

var b =document.getElementById("test").childNodes;

tip： 获取具体某个子节点，需要通过遍历去除换行和空格，最后通过索引获取。附上正则：[!/\s/]
3.通过children来获取子节点

var getFirstChild = document.getElementById("test").children[0];

4.获取第一个子节点firstChild 缺点：会获取无效元素

var getFirstChild = document.getElementById("test").firstChild;

tip: 同childNodes，需要筛选空格和换行，否则返回为undefied

5.firstElementChild获取第一个子节点，推荐！

var getFirstChild = document.getElementById("test").firstElementChild;

6.获取最后一个子节点，同第一个节点，推荐后者。

var getLastChildA = document.getElementById("test").lastChild;
var getLastChildB = document.getElementById("test").lastElementChild;

添加类名 删除类名

1.为元素添加 class:

document.getElementById("myDIV").classList.add("mystyle");

2.为元素添加多个类:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
3.为元素移除一个类:

document.getElementById("myDIV").classList.remove("mystyle");

4.为元素移除多个类:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

5.检查是否含有某个CSS类

myDiv.classList.contains('myCssClass'); //return true or false