DOM操作

作者: dpeng1203 | 来源:发表于2018-04-27 14:23 被阅读0次

    1. dom对象的innerText和innerHTML有什么区别?

    innerText返回元素内的文本内容,去除了HTML标签
    innerHTML返回元素内的HTML结构,包括HTML标签

    2. elem.children和elem.childNodes的区别?

    对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象。

    3.查询元素有几种常见的方法?ES5的元素选择方法是什么?

    查询元素的常见方法:
    兼容性比较好:
    getElementsByTagName()方法返回所有指定标签的元素
    getElementsByName()方法选择拥有name属性的HTML元素
    getElementById()方法返回匹配指定ID属性的元素节点
    getElementsByClassName()方法返回一个包括了所有class名字符合指定条件的元素(类数组对象)
    ES5的元素选择方法:
    querySelector()方法返回匹配指定的CSS选择器的元素节点
    querySelectorAll()方法返回匹配指定的CSS选择器的所有节点
    ES5的方法:相对来说更简洁,括号内的可以直接像CSS选择器一样填写名称

    4.如何创建一个元素?如何给元素设置属性?

    createElement()方法用来生成HTML元素节点
    getAttribute()方法用于获取元素的属性值
    setAttribute()方法用于设置元素属性
    removeAttribute()方法用于删除元素属性

    newDiv
    <div>​</div>​
    newDiv.setAttribute('class','hunger')
    undefined
    newDiv
    <div class=​"hunger">​</div>​
    newDiv.getAttribute('class')
    "hunger"
    newDiv.removeAttribute('class')
    undefined
    newDiv
    <div>​</div>​
    

    5.如何给页面元素添加子元素?如何删除页面元素下的子元素?

    appendChild()方法在元素末尾添加元素
    insertBefore()方法在某个元素之前插入元素
    removeChild()方法可用于删除某元素下的子元素
    replaceChild()接受两个参数:要插入的元素和要替换的元素

    6. element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?

    方法
    add():添加一个类名
    item(index):查找第index个类名
    remove(className):删除一个类名
    contains(className):是否包含指定类名,返回布尔值

    var title = document.querySelector('.title')
    undefined
    title.classList
    DOMTokenList ["title", value: "title"]
    title.classList.add('active')
    undefined
    title.classList.remove('active')
    undefined
    title.classList.contains('title')
    true
    

    7.如何选中如下代码所有的li元素? 如何选中btn元素?

    <div class="mod-tabs">
       <ul>
           <li>list1<li>
           <li>list2<li>
           <li>list3<li>
       </ul>
       <button class="btn">点我</btn>
    </div>
    

    选中所有的li元素
    document.getElementsByTagName('li')
    document.querySelectorAll('li')
    选中btn元素
    document.getElementsByClassName('btn')
    document.querySelector('.btn')

    相关文章

      网友评论

          本文标题:DOM操作

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