1 创建节点(创建标签) 
 2     var a = document.createElement(‘标签名称‘); 
 3     示例,创建a标签
 4         var a = document.createElement(‘a‘);
 5     var dd = document.getElementById(‘dd‘); 找到div标签
 6 添加节点
 7     #添加节点,添加到了最后
 8     dd.appendChild(a);将创建的a标签添加到dd这个div标签里面的最后.
 9 
10     #在某个节点前面添加节点
11     父级标签.insertBefore(新标签,某个儿子标签)
12     示例
13         var dd = document.getElementById(‘dd‘);  #找到父级标签
14         var a = document.createElement(‘a‘);   #创建一个新的a标签
15         var d2 = dd.children[1];  #找到父级标签下的某个儿子标签
16         dd.insertBefore(a,d2);   #将a标签插入到上面这个儿子标签的前面.
17 删除节点
18     dd.removeChild(d2);  父级标签中删除子标签
19         
20 替换节点
21     var dd = document.getElementById(‘dd‘);  #找到父级标签
22     var a = document.createElement(‘a‘);  #创建a标签
23     a.innerText = ‘百度‘;  
24     var d1 = dd.children[0];  #找到要被替换的子标签
25     dd.replaceChild(a,d1);  #替换

1 d1.innerText; 查看
2 
3 设置:
4     d1.innerText = "<a href=‘‘>百度</a>";  
5     d1.innerHTML = "<a href=‘‘>百度</a>";  能够识别标签

1 var divEle = document.getElementById("d1");
2 divEle.setAttribute("age","18")  #比较规范的写法
3 divEle.getAttribute("age")
4 divEle.removeAttribute("age")
5 
6 // 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
7 imgEle.src
8 imgEle.src="..."

 1 var inp = document.getElementById(‘username‘);
 2 inp.value;  #查看值
 3 inp.value = ‘taibai‘; #设置值
 4 
 5 选择框:
 6     <select name="city" id="city">
 7         <option value="1">上海</option>
 8         <option value="2">北京</option>
 9         <option value="3">深圳</option>
10     </select>
11     
12     var inp = document.getElementById(‘city‘);
13     inp.value;  #查看值
14     inp.value = ‘1‘;  #设置值

1 var d = document.getElementById(‘oo‘); 
2 d.classList;  #获得这个标签的class属性的所有的值
3 d.classList.add(‘xx2‘);  #添加class值
4 d.classList.remove(‘xx2‘); #删除class值
5 d.classList.contains(‘xx2‘);  #判断是否有某个class值,有返回true,没有返回false
6 d.classList.toggle(‘xx2‘);  #有就删除,没有就增加

1 <div id="d1" class="c1" onclick="f1();"></div>
2 
3 <script>
4     function f1() {
5         var d = document.getElementById(‘d1‘);
6         d.style.backgroundColor = ‘yellow‘;
7     }
8 
9 </script>

1     <div id="d1" class="c1"></div>
2 
3     var d = document.getElementById(‘d1‘);
4     d.onclick = function () {
5         d.style.backgroundColor = ‘yellow‘;
6     }

 1 this表示当前标签对象
 2 <div id="d1" class="c1" onclick="f1(this);"></div>
 3 function f1(ths) {
 4         // var d = document.getElementById(‘d1‘);
 5         // d.style.backgroundColor = ‘yellow‘;
 6         ths.style.backgroundColor = ‘yellow‘;
 7 
 8         var d = document.getElementById(‘d2‘);
 9         d.style.backgroundColor = ‘yellow‘;
10     }

1    <div id="d1" class="c1"></div>
2     
3     var d = document.getElementById(‘d1‘);
4     d.onclick = function () {
5         this.style.backgroundColor = ‘yellow‘;
6         // d.style.backgroundColor = ‘yellow‘; //this表示当前标签对象
7     }

 1  var inp = document.getElementById(‘username‘);
 2     inp.onfocus = function () {
 3         var d = document.getElementById(‘d1‘);
 4         d.style.backgroundColor = ‘pink‘;
 5     };
 6     // onblur 失去光标时触发的事件
 7 
 8     inp.onblur = function () {
 9         var d = document.getElementById(‘d1‘);
10         d.style.backgroundColor = ‘green‘;
11     };

 1 <select name="" id="jishi">
 2     <option value="1">太白</option>
 3     <option value="2">alex</option>
 4     <option value="3">沛齐</option>
 5 
 6 </select>
 7 
 8 // onchange事件，内容发生变化时触发的事件
 9     var s = document.getElementById(‘jishi‘);
10     s.onchange = function () {
11         //this.options  select标签的所有的option标签
12         //this.selectedIndex被选中的标签在所有标签中的索引值
13         console.log(this.options[this.selectedIndex].innerText + ‘搓的舒服‘);
14     }
15     
16     
17 用户名:<input type="text" id="username">    
18 
19     //input标签绑定onchange事件
20     var inp = document.getElementById(‘username‘);
21     inp.onchange = function () {
22         console.log(this.value);  
23     };