1.怎么实现选项卡？实现逻辑是什么？

首先，给选中后的按钮设置颜色标签（以后谁点击，就给他加上这个类名，同时把别的按钮的类名清空。然后再把相应的div的display变成block，同时把别的display变成hidden）

  1. <div class="wrapper">
  2.     <button>11</button>
  3.     <button>222</button>
  4.     <button>333</button>
  5.     <div class="content">111</div>
  6.     <div class="content">222</div>
  7.     <div class="content">333</div>
  8. </div>
  1. .wrapper div {
  2.     display: none;
  3.     width: 200px;
  4.     height: 200px;
  5.     border: 2px solid red;
  6. }
  7. .active {
  8.     background-color: yellow;
  9. }
  1. var btn = document.getElementsByTagName('button');
  2. var div = document.getElementsByClassName('content');
  3. for (var i = 0; i < btn.length; i++) {
  4.     (function (n) {
  5.         btn[n].onclick = function () {
  6.             for (var j = 0; j < btn.length; j++) {
  7.                 btn[j].className = "";
  8.                 div[j].style.display = "";
  9.             }
  10.             this.className = "active";
  11.             div[n].style.display = 'block';
  12.         }
  13.     }(i))
  14. }

2.怎么创造一个可移动的方块？

  1. var div = document.createElement('div');
  2. document.body.appendChild(div);
  3. div.style.width = '100px';
  4. div.style.height = '100px';
  5. div.style.backgroundColor = 'red';
  6. div.style.position = 'absolute';
  7. div.style.left = '100px';
  8. div.style.top = 0;
  10. // 注意：对于left和top来说，他们的值也必须是100px，这种
  11. // 如果值是0的话，那么可以不用加引号，也不用px。
  12. setInterval(function () {
  13.     div.style.left = parseInt(div.style.left) + 2 + "px";
  14.     div.style.top = parseInt(div.style.left) + 2 + "px";
  15. }, 10)


如何让方块加快速度？做加速运动？

  1. var speed = 1;
  2. setInterval(function() {
  3.     speed += speed/10;
  4.     div.style.left = parseInt(div.style.left)+speed+"px";
  5.     div.style.top = parseInt(div.style.left) + speed + "px";
  6. },50)

如何停止？

  1. var speed = 1;
  2. var timer = setInterval(function () {
  3.     speed += speed / 10;
  4.     div.style.left = parseInt(div.style.left) + speed + "px";
  5.     div.style.top = parseInt(div.style.left) + speed + "px";
  6.     if (parseInt(div.style.top) > 500 && parseInt(div.style.left) > 500) {
  7.         clearInterval(timer)
  8.     }
  9. }, 50)

怎么用键盘控制某元素上下移动？

  1. document.onkeydown = function (e) {
  2.     switch (e.which) {
  3.         case 38 :
  4.             div.style.top = parseInt(div.style.top) - 5 + "px";
  5.             break;
  6.         case 40 :
  7.             div.style.top = parseInt(div.style.top) + 5 + 'px';
  8.             break;
  9.         case 37:
  10.             div.style.left = parseInt(div.style.left) - 5 + 'px';
  11.             break;
  12.         case 39:
  13.             div.style.left = parseInt(div.style.left) + 5 + 'px';
  14.     }
  15. }

如果查看键盘键代表的数字？

通过下面的方法查得, left = 37, up = 38, right = 39, down = 40

  1. document.onkeydown = function (e) {
  2.     console.log(e.which);
  3. }

如何使得控制元素的时候，可以加速？

  1. <button style="position:fixed;top:50%;right:30%">加速</button>
  2. <button style="position:fixed;top:55%;right:30% ">重置</button>
  1. var speed = 5;
  2. document.onkeydown = function (e) {
  3.     switch (e.which) {
  4.         case 38 :
  5.             div.style.top = parseInt(div.style.top) - speed + "px";
  6.             break;
  7.     }
  8. }
  9. var btns = document.getElementsByTagName('button');
  10. fastbtn = btns[0];
  11. rebtn = btns[1];
  12. fastbtn.onclick = function () {
  13.     speed++;
  14. }
  15. rebtn.onclick = function () {
  16.     speed = 1;
  17. }

3.怎么实现涂色板？

  1. ul {
  2.     list-style: none;
  3.     width: 400px;
  4.     height: 400px;
  5. }
  6. li {
  7.     box-sizing: border-box;
  8.     width: 20px;
  9.     height: 20px;
  10.     float: left;
  11.     border:1px solid black;
  12. }
  1. <ul>
  2.     li*400
  3. </ul>
  1. <script type="text/javascript">
  2.     var ul = document.getElementsByTagName('ul')[0];
  3.     ul.onmouseover = function (e) {
  4.         var event = e || window.event;
  5.         var target = event.target || event.srcElement;
  6.         target.style.backgroundColor = "rgb(0,255," + target.getAttribute('col') + ")";
  7.         target.setAttribute('col', parseInt(getAttribute('col')) + 6);
  8.     } 
  9. </script>


4.查询元素有哪几种方法？（重点）

有两种大方法：1.通过自身特征查找2.通过和别的元素的关系查找document是根标签。真正代表整个文档

**

通过元素自身特征查找元素有哪些方法？
  1. 根据id找元素(一般不用)<br />    document.getElementById('demo');<br />    根据标签名找元素(常用)<br />    var div = document.getElementsByTagName('div');<br />    这里的div是  类数组。 (不是数组)<br /> <br />    这个用的不多，因为在ie9以下的浏览器版本不好使<br />var div = document.getElementsByClassName("name");<br />    下面两个很好用，但是缺点也很大：不是实时的。<br />    比如女鬼杀一个人，照片上就少一个，这就是实时的。<br />    比方说，html里有三个div，但是在控制台上执行div.remove(),<br />    删除了一个div，但是querySelector搜到的还是三个，因为他会生成自己<br />    副本，然后再副本里进行操作。<br />    querySelector 和 querySelectiorAll是可以按照css选择器的方式来选的<br />var strong = document.querySelector('div>span strong.demo');

通过元素和其他元素的关系查找元素有哪几种方法？
  1.         var li = document.querySelector('li'); <br />            1.遍历结点树:  以下都不带括号，因为不是方法<br />            parentNode，一个结点的父节点只有一个<br />            childNodes：子节点们，子节点不只是元素结点，他有很多，比如<br />                                元素节点，属性节点，文本节点，注释节点，document，DocumentFragment<br />                                可以用div.childNodes.length()查看结点长度<br /> <br />            firstChild->第一个子节点<br />            lastChild->最后一个子节点<br />            nextSibling->后一个兄弟节点<br />            previousSibling->前一个兄弟节点<br /> <br />            2.基于元素结点树的遍历<br />            parentElement -> 返回当前结点的父元素结点（IE不兼容）<br />            children：只返回当前元素的元素子节点<br />            firstElementChild -> 第一个元素子节点<br />            lastElementChild -> 最后一个元素子节点<br />            nextElementSibling/previousElementSibling -> 前/后一个兄弟元素节点

5.节点自身有哪些知识？他的四个属性是什么？有什么方法？

节点的四个属性：

  1.          nodeName: 元素的标签名，一大些形式表示，只读<br />                        div.childNodes[0].nodeName<br />            nodeValue<br />                Text节点和Comment节点的文本内容，可读写 <br />                div.childNodes[0].nodeValue<br />            nodeType<br />                该节点的类型，只读<br />                元素节点 --- 1<br />                属性节点 --- 2<br />                文本节点 --- 3<br />                注释节点 --- 8<br />                document --- 9<br />                DocumentFragement --- 11<br />                div.childNodes[0].nodeType<br />            attribute（一般用不着）<br />                    Element结点的属性集合<br />

节点的一个方法：Node.hasChildNodes();

document的继承关系： document -> HTMLDocument.prototype -> Document.prototype
HTMLDocument.prototype定义了一些常用的属性，body，head分别指代标签 即：document.body document.head 可以直接选中，而不用
document.getElementsByTagName(‘body’)

Document.prototype上定义了documentElement属性，指代文档的根元素html
即：document.documentElement就是html标签

6.文档的增删改查替换方法有哪些？元素的属性和方法有哪些？

  1. // 增  元素、文本、注释、文档片
  1.     document.createElement();  //常用
  2.     document.createTextNode();
  3.     document.createComment();
  4.     document.createDocumentFragment();
  6.     // 插  
  7.     // 在末尾插入  常用
  8.     parentNode.appendChild();
  9.     div.appendChild();
  10.     // 父亲元素调用，在自己的内部insert a before b
  11.     parentNode.insertBefore(a, b);
  12.     div.appendChild()
  14.     // 删除
  15.     // 两种，一种父元素删除子元素，一种子元素自删
  16.     parent.removeChild();
  17.     child.remove(); //常用
  18.     // 替换    不咋用
  19.     parent.replaceChild(new, origin);
  1. Element节点的一些属性<br />        innerHTML ：包含标签 <br />        innerText ：只取文本<br />    Element节点的一些方法<br />        setAttribute(name,value)<br />            div.setAttribute('class','box')