前端知识-JavaScript webAPI

DOM

获取

节点与元素区别

• 节点包含、标签、空文档和换行节点 元素 就是标签 节点包含元素

按照选择器查找

querySelector(选择器);
querySelectorAll();

功能	节点	元素
获取父	parentNode	parentElement
获取前兄弟	previousSibling	previousElementSibling
获取后兄弟	nextSibling	nextElementSibling
获取所有子	childNodes	children
获取第一子	firstChild	firstElementChild
获取最后子	lastChild	lastElementChild

1. nodeType 获取节点类型1为元素 2为属性 3为文本
2. nodeName 返回节点名字 使用tolowercase()统一为小写
3. nodeValue 返回节点内容 节点为元素返回NULL 文本返回内容

创建

var a1 = document.createElement(“li”); //创建一个li标签

插入

• 方式1：父节点儿子尾部
  父节点.appendChild(新的子节点);
• 方式2：
  父节点.insertBefore(新的子节点,作为参考的子节点)
  解释：
  在参考节点前插入一个新的节点。
  如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。

删除节点

父节点.removeChild(子节点);
删除自己
node1.parentNode.removeChild(node1);

复制节点（克隆节点）

要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。
要复制的节点.cloneNode(true); //还要复制子节点

替换插入

node1.replaceChild(newNode, oldNode)

获取节点的属性

• 方法一
  元素节点.属性名;
  元素节点[属性名];
  注意 修改class 是 className
• 方法二
  元素节点.getAttribute(“属性名称”);
  注意 修改class 是 class
  方式1和方式2的区别在于：前者是直接操作标签，后者是把标签作为DOM节点。推荐方式2。

设置节点的属性

• 方法一
  元素节点.属性名 =
  元素节点[属性名]=
• 方法二
  元素节点.getAttribute(“属性名称”，"");

注意:
方式1 的元素节点.属性和元素节点[属性]：绑定的属性值不会出现在标签上。

方式2 的get/set/removeAttribut：绑定的属性值会出现在标签上。

这两种方式不能交换使用，get值和set值必须使用同一种方法。

删除节点的属性

myNode.removeAttribute(“class”);

内容

innerHTML和innerText的区别
value：标签的value属性。是property属性而非attribute
innerHTML：双闭合标签里面的内容（包含标签）。
innerText：双闭合标签里面的内容（不包含标签）。（老版本的火狐用textContent）

style属性的获取和修改

• style 只能获得行内样式 也就是显示写道标签里的属性
• style属性的注意事项
  style属性需要注意以下几点：

（1）样式少的时候使用。

（2）style是对象。我们在上方已经打印出来，typeof的结果是Object。

（3）值是字符串，没有设置值是“”。

（4）命名规则，驼峰命名。

（5）只能获取行内样式，和内嵌和外链无关。

（6）box.style.cssText = “字符串形式的样式”。
//通过cssText一次性设置行内样式
box1.style.cssText = “width: 300px;height: 300px;background-color: green;”;
等价于
box.setAttribute(“style”,“width: 300px;height: 300px;background-color: green;”);

• style只能获得行类元素 如果要获得跟多css
  window.getComputedStyle(“要获取样式的元素”, “伪元素 没有写无”);返回列表

添加修改类

ele.classList.add(“active”)
删除 remove(“active”)

JS操作cookie