DOM默写一

DOM默写一

::: tip 默认说明

DOM是前端页地页面操作的最常见的方式，虽然已经有相应的框架jQuery来进行DOM操作，但是我们仍然需要对DOM的一些常用属性与方法及事件做一些复习，熟悉底层，了解原理，做到精细化学习

在默写的过程当中，如果有不会的，可以去查看笔记，但是应该尽量做到先回忆，不要直接去翻看笔记，这样对学习没有太大的帮助

1. DOM新增元素，删除元素的方法与属性（5分）

   var ele = createElement("标签名");  //创建标签
   appendChild(ele);
   insertAdjancentElemement("元素位置",ele);
   insertAdjanceHTML("元素位置","HTML标签");
   //删除
   remove();
   removeChild();
   设置innerHTML="";
   

2. DOM前面的元素与后面的元素父级元素与子级元素的方法与属性（4分）

   previousElementSibling //前面的
   nextElementSibling   //后面的
   parentElement    //父级元素
   children   //子级元素
   

3. DOM获取/设置某一个属性的方法（自带属性，自定义属性等）（3分）

   <input type="text" data-userName="yangbiao">
   <input type="text" data-user-name="yangbiao">
   

   单属性直接用true/false

   //自带属性
   input.type
   //通过方法
   getAttribute("data-username");
   setAttribute("data-username","");
   remmoveAttribute("属性名");
   //自定义属性
   dataset.userName
   

4. DOM获取当前元素的class的名称的方法（1分）

   <input type="text" class="a b">
   <script>
   	className; //"a b";
   </script>
   

5. DOM中给当前元素添加/删除class样式的方法（3分）

   classList.add();
   classList.remove();
   classList.toggle();
   

6. 表单元素form中获取元素存放的值的属性是什么（1分）

   //value属性
   

7. div或p的标签获取里面的文本或HTML内容的属性（2分）

   innerText;
   innerHTML;
   

8. 在document中获取元素的方法有那些，各返回的是什么（6分）

   getElementById();   //得到元素当前元素  得不到是null
   getElementsByClassName();  //返回一个 HTMLCollection
   getElementsByTagName();   //返回一个HTMLCollection
   getElementsByName();       //返回一个NodeList
   querySelector();    //得到当前元素 得不到就是null
   querySelectorAll();  //NodeList
   

9. 描述浏览器地址栏的信息是那个对象（1分）

   location
   

10. 下面的网页中，主机地址，端口，是什么#div1又是什么，?后面的又是什么，怎么取?后面的值（5分）

    http://www.softeem.xin:8888#div1?userName=1&pwd=123
    

    // 主机地址:www.softeem.xin;
    // 端口号：8888
    // #div1: hash
    // ?号后面是请求参数 search获取
    

11. 浏览器怎么后退，调用什么方法 （2分）;

    history.back();
    history.go(-1);
    

12. 本地缓存中storage有那些（2分）

    localStorage
    sessionStorage
    

13. window.open是打开页面，还有什么方法也可以实现页面跳转（5分）;

    location.href="";
    location.assign();
    location.replace();
    //------
    var a=document.createElement("a");
    a.href="";
    a.click();
    

14. 常用事件有那些，0级DOM事件与2级DOM事件有什么区别（4分）

    //事件区别
    //0级DOM事件没有事件链，2级DOM事件会形成事件链
    //2级DOM事件没有on
    //2级DOM事件的绑定有兼容性，0级没有
    //2级DOM事件可以设置事件冒泡与事件捕获的方式
    

15. 阻止事件冒泡用什么，取消事件默认行为用什么？（3分）

    //阻止事件冒泡
    cancelBubble=true;
    stopPropogation();
    //取消事件默认行为
    preventDefault();
    //0级 return false;
    

16. 解释一下事件委托（3分）

    //把原本应该绑定在自己的事件绑定在父级元素上面，然后通过判断事件的触发者来决定是否是子级元素在触发
    //target 		  事件触发者
    //currentTarget   事件绑定者