目 录CONTENT

文章目录

DOM默写一

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 11480 阅读 / 3747 字 / 正在检测是否收录...

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   事件绑定者
    
0

评论区