JavaScript入门篇
JavaScript概念
前端三元素
HTML：通过各种html元素搭建页面结构。
CSS：负责页面样式：形状，大小，颜色，动画等。
JavaScript：控制页面行为：部分动画效果、页面与用户的交互、页面功能。
JavaScript主要有三大概念：
ECMAScript标准:JS的基本的语法.
DOM:文档对象建模，DOM提供一种操作HTML标签的API,每个页面视为一个文档，每个标签视为一个元素，标签下有标签，即元素下有元素，文档及文档中的所有的元素(标签)组成的一个树形结构图,叫树状图(DOM树)，由于万物皆为对象，隐藏文档即为对象，标签也为对象，JavaScript可以操作对象，进行页面的增删查改等。
BOM:浏览器对象模型，提供了与浏览器窗口进行交互的API。
DOM基本操作
document接口：
>document.cookie //获取cookie
>document.querySelectorAll(".class") //接受一个 CSS 选择器作为参数返回匹配该选择器的元素节点，以list的格式返回所有的节点，
>document.querySelector("#class") //受一个 CSS 选择器作为参数返回匹配该选择器的元素节点，返回第一个节点。
>document.getElementsByTagName("TAG_NAME") //搜索 HTML 标签名，返回符合条件的元素。
>document.getElementsByClassName("CLASS_NAME") //搜索所有class名字符合指定条件的元素并返回元素
>document.getElementsByName("NAME") //用于选择拥有name属性一致的 HTML 元素
>document.getElementById("ID") //用于选择拥有ID属性一致的 HTML 元素
>var test = document.createElement('p') //创建元素p
>var a = document.createAttribute('test');a.value = 'test_value'; //创建节点的属性及值。
>HTML_DATA.setAttribute("abc","123") //新建节点的属性及值
>var CommentNode = document.createComment('Comment—data'); //新建一个注释节点
>var node = document.adoptNode(externalNode); //删除某个节点，一般用完后要
>var docFragment = document.createDocumentFragment();//创建空的文档对象，不属于当前文档，常常用来生成一段较复杂的 DOM 结构，然后再插入当前文档。
>document.hasFocus() //返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。
>ocument.importNode() //从原来所在的文档或DocumentFragment里面，拷贝某个节点及其子节点，让它们归属当前document对象,document.importNode有两个参数，第一个参数是
外部节点，第二个参数是一个布尔值，表示对外部节点是深拷贝还是浅拷贝，默认是浅拷贝（false）。虽然第二个参数是可选的，但是建议总是保留这个参数，并设为true。
element接口：
>test = document.getElementById("test_id") // 获取ID为test_id的element
>test.id //获取element的id
>test.tagname //获取element的标签
>test.attributes[0] //获取element的属性
>test.className //获取element的class名字,返回的是以空格分隔的class Name的字符串
>test.className.add ("CLASSNAME") // 添加className
>test.className.replace("/^CLASSNAME$/", "") //删除className
>test.classList //获取element的class List，返回的是类数组的所有className
>test.classList.add("CLASSNAME") //添加className
>test.classList.remove("CLASSNAME") //删除classname
>test.classList.toggle("CLASSNAME",bool) //接收第二个参数，如果是true，就添加，如果是false，则不删除该属性。
>test.dataset.DATA_NAME //获取定义data-属性的值,DATA_NAME为属性data-{NAME} NAME的值。
>test.innterHTML //属性返回一个字符串，等同于该元素包含的所有 HTML 代码
>test.children //返回一个数组，包含所有的子元素，其他其他方法：firstElementChild，lastElementChild
>test.nextElementSibling //属性返回当前元素节点的后一个同级元素节点，如果没有则返回null
>test.previousElementSibling //返回当前元素节点的前一个同级元素节点，如果没有则返回null。
>getAttribute() //读取某个属性的值
>getAttributeNames() //返回当前元素的所有属性名
>setAttribute() //写入属性值
>hasAttribute() //某个属性是否存在
>hasAttributes() //当前元素是否有属性
>removeAttribute() //删除属性
>Element.querySelector() //接受 CSS 选择器作为参数，返回父元素的第一个匹配的子元素。如果没有找到匹配的子元素，就返回null。
DOM操作参考文档网址：https://wangdoc.com/javascript/dom/
感谢贡献。