美文网首页
Dom操作知识点

Dom操作知识点

作者: 谢环志 | 来源:发表于2016-09-12 15:36 被阅读0次
  • dom对象的innerText和innerHTML有什么区别?
    答:
    innerText是获取元素中的文本部分,若有多层嵌套,则以从浅到深的方式进行组合拼接内容。
    innerHTML是获取HTML中的文档结构,包括其中的所有标签。

  • elem.children和elem.childNodes的区别?
    答:
    elem.children是获取父节点的所有标签子元素
    elem.childNodes是获取父节点下的所有内容,包括被父节点自身包裹的文本内容

  • 查询元素有几种常见的方法?
    答:
    getElementById()通过id名去查询元素
    getElementsByClassName()通过类名去查询含该类名的所有元素
    getElementsByTagName()通过标签名去查询该标签的所有元素
    getElementsByName()通过标签所设置的name属性去获取元素
    querySelector()ES5的新增查询方法,可以在标签中输入以点、#开头或者直接标签名去查询对应id、class和标签的元素,返回的是具有该属性的第一个元素。
    querySelectorAll()和上面的querySelector()查询方法一致,不同的是它是查询所有元素

  • 如何创建一个元素?如何给元素设置属性?
    使用createElement()创建一个元素的标签,生成一个html元素节点
    使用createTextNode()创建一个文本节点
    使用setAttribute()来给元素设置属性,其中传入两个值,第一个值为元素的属性名,第二个值是定义的值

  • 元素的添加、删除?
    答:
    使用appendChild()将传入的元素添加到元素的末尾。
    使用 insertBefore()将元素插入到指定元素之前
    使用replaceChild()来替换元素,它接收两个参数,第一个是要插入的元素,第二个为要被替换的元素
    removeChild()是用来删除元素的,直接传入需要删除的元素即可

DOM0 事件和DOM2级在事件监听使用方式上有什么区别?
答:
DOM0事件是直接将事件以内联的方式写在HTML标签内部,比如:
<a href="#" onclick="console.log('clicked');">click</a>
这种方式定义的事件看起来书写方面,但是存在缺点:

1.存在加载时间差的问题,若是用户在其中的js部分还未加载完成时去点击,则不会触发事件
2.这样的写法让HTML和js的耦合太过于紧密,代码维护不方便,并且一个事件只能对应一个元素,代码没有复用性
DOM2事件:有两个方法addEventListener()和removeEventListener()
它们都接收三个参数,包括事件类型、事件处理方法和布尔值,默认布尔为false

attachEvent与addEventListener的区别?
答:
1.接收的参数数量不同:前者只接收事件类型和事件处理方法两个参数,而后者还需要接收布尔值来判断是在捕获阶段调用事件处理程序还是在冒泡阶段处理,而对于attachEvent()而言,由于IE只支持事件冒泡,所以添加的程序会被添加到事件冒泡阶段;addEventListener的第一个参数指的是事件类型,而attachEvent则是接收事件处理程序名称。
2.兼容性不同,IE并不支持addEventListener(),所以才有了attachEvent和removeEvent两个方法来处理。
3.作用域不同,后者的作用域在元素本身,所以在其中添加this指的是触发事件本身,而前者的作用域在全局变量内运行,this则指向window。
4.执行顺序不同:后者按照事件的先后添加顺序执行,而前者的执行则是不可预料的

  • 解释IE事件冒泡和DOM2事件传播机制?
    答:
    IE事件冒泡:从发生事件的位置,一次向上冒泡,直到Document
    DOM2事件传播机制:首先进行事件捕获、找到目标之后再进行向上冒泡的操作。

如何阻止事件冒泡? 如何阻止默认事件?
答:stopPropagation()取消事件进一步捕获和冒泡可以使用cancelable来查看默认时间是否可以被阻止,如果查询结果为true
,可以使用preventDefault()来阻止默认事件。

相关文章

  • 5-2 DOM本质

    5-2 DOM本质 DOM:document object model DOM操作 题目 知识点 解答 题目 DO...

  • javascript基础系列:DOM相关的技术知识点

    javascript基础系列:DOM相关的技术知识点 DOM及其基础操作 DOM: document object...

  • 前端知识点总结——DOM

    前端知识点总结——DOM 1.什么是DOM: Document Object Model 什么是: 专门操作网页内...

  • Dom操作知识点

    dom对象的innerText和innerHTML有什么区别?答:innerText是获取元素中的文本部分,若有多...

  • JQuery 17

    jQuery中的DOM操作 DOM操作的分类 DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM...

  • dom对象操作知识点

    1: dom对象的innerText和innerHTML的区别 innerText只获取该元素内的文本,inner...

  • DOM (javascript DOM节点操作)

    DOM (javascript DOM节点操作) 本节目录 查找DOM元素 DOM节点操作 javascript操...

  • react step组件滑动效果

    主要涉及3个知识点吧 useRef 因为react中操作DOM需要使用 ref 关联 window.scrollT...

  • Vue解决了哪些问题

    虚拟 dom:dom 操作时非常耗性能的,不再使用原生的 dom 操作节点,极大的解放 dom 操作,但具体操作的...

  • jQuery中的DOM操作

    DOM操作的分类     DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。 ...

网友评论

      本文标题:Dom操作知识点

      本文链接:https://www.haomeiwen.com/subject/tpmpettx.html