python-web前端dom基本操作，快来试试手

一.DOM操作

查找节点：

1. 直接查找

document.getElementById           //根据ID获取唯一一个标签
document.getElementsByClassName   //根据class属性获取一系列标签
document.getElementsByTagName     //根据标签名获取一系列标签

2 间接查找
语法 含义

childNodes	获取所有的子节点，除了元素还有文本等
children	获取所有元素子节点，不包含文本
parentNode	获取父节点
previousSibling	获取上一个兄弟节点，不包含文本
previousElementSibling	获取上一个兄弟元素节点，包含文本
nextSibling	获取下一个兄弟节点，不包含文本
nextElementSibling	获取下一个兄弟元素节点，包含文本
firstChild	获取第一个子节点，不包含文本
firstElementChild	获取第一个子节点，包含文本
lastChild	获取最后一个子节点，不包含文本
lastElementChild	获取父元素最后一个元素节点，包含文本

3 增加节点

1、创建新节点
var divEle = document.createElement('div');
2、追加一个子节点（放到最后）
父节点.appendChild(新的子节点)；
3、插入一个子节点（插入到某个节点前）
父节点.insertBefore(新的子节点,某个节点); 
4、克隆节点
要复制的节点.cloneNode();       //括号里不带参数和带参数false：只复制节点本身，不复制子节点。
要复制的节点.cloneNode(true);   //带参数true：既复制节点本身，也复制其所有的子节点。

4 删除、替换节点

父节点.removeChild(要删除的子节点)；
父节点.replaceChild(新的子节点, 某个子节点); 

5 修改/设置节点属性

1、获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText                            //只查看所有标签内的文本                   
divEle.innerHTML                            //查看所有子标签，包括文本和子标签
2、设置文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"                //先清空节点内容，再添加文本(字符串:'<h1>我是h1</h1>')
divEle.innerHTML="<p>2</p>"         //先清空节点内容，可识别文本内的html标签(标签:'<h1>我是h1</h1>')
3、attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
4、自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

6 获取元素的值

适用于input、select、textarea标签
var x=document.getElementById('input')
var y=document.getElementById('select')
var z=document.getElementById('textarea')
x.value
y.value
z.value

7 class操作

var x=document.getElementById('div1')
​
x.classList.remove('col1')          //x.classList里删除class='col1'
x.classList.add('col1')             //x.