元素（dom）获取/增/删/改

js获取元素的方法：

根据id获取：

返回的是一个元素对象

document.getElementById('id');

根据标签名获取：

返回的是 获取过来的元素对象的集合 以伪数组的形式储存的

 document.getElementsByTagName('标签名');
 var list = document.getElementsByTagName('li');

 还可以获取某个元素（父元素）内部所有指定的标签名的子元素

 var ul = document.getElementsById('ul');// 必须是指定的单个元素
var list=ul.getElementsByTagName('li');

通过 HTML5 新增的方法获取：

 document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合 伪数组

 document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

 document.querySelectorAll('选择器'); // 返回指定选择器的所有元素对象集合  伪数组
注意：
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:
document.querySelector('#nav');

获取特殊元素（body，html）：

doucumnet.body // 返回body元素对象
document.documentElement // 返回html元素对象

利用节点层级关系获取元素：

//父级节点
node.parentNode   // 返回 最近的一个父节点  如果指定的节点没有父节点则返回 null
// 子节点
parentNode.childNodes（标准）  // 包含指定节点的子节点的集合（包含文本，元素，空格等），该集合为即时更新的集合。

如果只需要元素节点：
var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
if (ul.childNodes[i].nodeType == 1) {
 // ul.childNodes[i] 是元素节点
 // nodeType 节点类型  1是元素节点 2是属性节点 3是文本节点（包含文字、空格、换行等）
 console.log(ul.childNodes[i]);
}
}

parentNode.children（非标准） // 返回所有的子元素节点 （是一个集合，伪数组）。它只返回子元素节点，其余节点不返

parentNode.firstChild  //firstChild 返回第一个子节点，找不到则返回null。（包含文本，元素，空格等）。

parentNode.lastChild //lastChild 返回最后一个子节点，找不到则返回null。（包含文本，元素，空格等）。

以下这两个方法有兼容性问题，IE9 以上才支持：
parentNode.firstElementChild  // firstElementChild 返回第一个子元素节点，找不到则返回null
parentNode.lastElementChild  // lastElementChild 返回最后一个子元素节点，找不到则返回null。

获取兄弟节点：
node.nextSibling // 返回当前元素的下一个兄弟节点，找不到则返回null。包含文本，元素，空格等
node.previousSibling // 返回当前元素上一个兄弟节点，找不到则返回null。包含文本，元素，空格等
以下两个方法有兼容性问题， IE9 以上才支持：
node.nextElementSibling // 返回当前元素下一个兄弟元素节点，找不到则返回null
node.previousElementSibling  // 返回当前元素上一个兄弟元素节点，找不到则返回null。

创建节点（动态创建元素节点 ）：

document.createElement('tagName')  //  tagName 元素名称例如：li，ul，div，a等

添加节点：

node.appendChild(child)  // 将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的
after 伪元素。
node.insertBefore(child, 指定元素) // 将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

例如：
var ul = document.querySelector('ul');
 var li = document.createElement('li'); // 先创建节点
ul.appendChild(li);  // 再添加节点  往后添加

ul.insertBefore(li, ul.children[0]);  // 添加节点  往前添加

删除节点：

node.removeChild(child) // 从 DOM 中删除一个子节点，返回删除的节点

复制节点(克隆节点):

 node.cloneNode() // 返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
如果括号参数为空或者为 false ，则是 浅拷贝 ，即只克隆复制节点本身，不克隆里面的子节点。
如果括号参数为 true ，则是 深度拷贝，会复制节点本身以及里面所有的子节点。

修改dom的元素属性:

修改元素属性： src、href、title等

dom.src=''

修改普通元素内容： innerHTML 、innerText

两个属性是可读写:

innerText 不识别 html 标签 非标准 会自动去除空格和换行

innerHTML 识别 html 标签 W3C标准 保留空格和换行

修改表单元素： value、type、disabled等

修改元素样式： style、className

className 会直接更改元素的类名，会覆盖原先的类名

var text = document.getElementById('txt');
text.className = 'text';

jQuery基本和层级选择器

$("选择器") // 里面选择器直接写css选择器即可，但要加引号

基础选择器重点使用：id，类名，标签名。

名称	用法	描述
id选择器	$("#id")	获取指定id的元素
全选选择器	$("*")	获取所有元素
类选择器	$(".class")	获取同一类名的class元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div,p,ul,li")	获取多个元素
交集选择器	$(“ul.thisul”)	获取类名为thisul的ul元素

 

层级选择器中后代和子代

名称	用法	描述
子代选择器	$("ul>li");	获得最近层级子元素，不会获得下下层级元素
后代选择器	$("ul li");	使用空格，代表后代选择器，获取ul下的所有元素，包含下下层级元素等

vue 获取元素：

<template>
  <div>
    <div ref="mydiv" @click="clickParent">点击获取元素</div>
  </div>
</template>

<script>
 
  export default {
    methods: {
      clickParent() {
        console.log(this.$refs.mydiv);
      }
    }
  }
</script>