美文网首页
Web23.DOM操作

Web23.DOM操作

作者: FiredEarthMusic | 来源:发表于2017-11-10 20:50 被阅读10次

    DOM 文档对象模型

    document对象

    document.doctype
    document.head
    document.location
    document.location.href
    document.location.protocol
    document.location.host
    document.location.hostname
    document.location.port
    document.location.search
    document.location.hash
    document.location.user
    document.location.password
    
    document.location.assign('http://www.google.com')
    document.location.reload(true)
    document.location.reload(false)
    document.location.assign('http://www.google.com')
    document.location.toString()
    
    document.open()
    document.close()
    
    document.write()
    

    Elementy对象

    Element对象表示HTML元素
    Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点,DOM提供了一系列的方法可以进行元素的增、删、改、查操作

    Element有几个重要的属性
    nodeName
    nodeType
    className
    id
    children
    childNodes
    firstChild
    lastChild
    nextSibling
    previousSibling
    parentNode、parentElement
    
    getElementById()
    getElementsByClassName()
    getElements
    

    题目1: dom对象的innerText和innerHTML有什么区别?

    Element.innerHTML 属性设置或获取描述元素后代的HTML语句。Element.innerText innerText是一个可写属性,返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容
    

    题目2: elem.children和elem.childNodes的区别?

    children: 子元素列表(HTMLCollection) 当前元素子元素的集合
    childNodes: 子元素列表(NodeList)  当前元素子元素以及文本的集合
    

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

    getElementById()
    var elem = document.getElementById("test")
    
    getElementsByClassName()
    var elem = document.getElementsByClassName('tab')
    
    getElementsByTagName()
    var paras = document.getElementsByTagName('p')
    
    ES5的方法:
    querySelector()
    querySelectorAll()
    

    题目4:如何创建一个元素?如何给元素设置属性?如何删除属性

    通过createElement()方法创建元素
    通过setAttribute()方法给元素设置属性
    通过removeAttribute()方法删除属性
    

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

    appendChild()  在元素末尾添加元素
    insertBefore()   在某个元素之前插入元素
    removeChild()  接受两个参数:要插入的元素和要替换的元素
    

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

    //div 是具有class = 'foo bar'的<div>元素的对象引用
    div.classList.remove('foo');
    div.classList.add('anotherclass');
    
    //如果visible被设置 则删除它 否则添加它
    div.classList.toggle('visible');
    
    //添加/删除  visible,取决于测试条件  小于10
    div.classList.toggle('visible', i < 10);
    alert(div.classList.contains('foo'));
    
    //添加或删除多个类
    div.classList.add('foo', 'bar');
    div.classList.remove('foo', 'bar');
    

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

    7.png
    <script>
        //选中所有的li元素
        document.getElementsByTagName('li')
        document.querySelectorAll('li')
        //选中btn元素
        document.getElementsByClassName('btn')
        document.querySelector('.btn')
    </script>
    

    相关文章

      网友评论

          本文标题:Web23.DOM操作

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