⑳.DOM操作

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

  • innerHTML属性返回调用元素的所有子节点,包括元素、注释、文本
  • innerText属性返回元素包含的所有文本内容,包括子元素的文本
  • 在通过innerText和innerHTML写入值时,会删除元素所有子节点,插入文本节点。不过innerText写入的全部为文本,而innerHTML可以是其他内容
<div id="div1">
    <p>123</p>
    <span>123</span>
</div>
<div id="div2">
    <p>456</p>  
    <span>456</span>
</div>
<script>
    var a = document.getElementById("div1")
    var b = document.getElementById("div2")
    a.innerText = "<p>这是innerText</p>"
    b.innerHTML = "<p>这是innerHTML</p>"
</script>
innerHTML和innerText在页面中的输出
<div id="div1">
        <p>innerText</p>
        <span>innerText</span>
</div>
<div id="div2">
    <p>innerHTML</p>
    <span>innerHTML</span>
</div>
<script>
    var a = document.getElementById("div1")
    console.log(a)
    console.log(a.innerText)

    var b = document.getElementById("div2")
    console.log(b)
    console.log(b.innerHTML)
</script>
innerText和innerHTML对应的内容

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

参考
1. JavaScript中Element与Node的区别,children与childNodes的区别

Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,文本节点,注释节点等,而Element继承Node类,是其中一种,同时扩展了一些属性。
elem.children返回的是Element类,而elem.childNodes返回的是Node类

节点类型 NodeType 描述
元素 ELEMENT_NODE 1 <p><div>
文本 TEXT_NODE 3 /
注释 COMMENT_NODE 8 <!--123-->
文档 DOCUMENT_NODE 9 /
<div id="div1">
    <p>innerText</p>  <!--lala-->
    <span>innerText</span>
</div>
<div id="div2">
    <p>innerHTML</p>  <!--lala-->
    <span>innerHTML</span>
</div>
<script>
    var a = document.getElementById("div1")
    console.log(a.children)  //

    var b = document.getElementById("div2")
    console.log(b.childNodes)  //
</script>
children和childNodes 输出

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

//返回id为div1的一个对象
document.getElementById('div1')
//返回的类数组
document.getElementsByTagName('p')
document.getElementsByClassName('attr1 attr2')
document.getElementsByName('name')
//ES5 selectors类似CSS选择器
//返回符合第一个
document.querySelector(selectors)
//返回符合的全部  
document.querySelectorAll(selectors)

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

//生成HTML元素节点
document.createElement('div')
//生成文本节点
document.createTextNode('Hello')
//DocumentFragment对象是一个存在于内存的DOM片段,但是不属于当前文档,常常用来生成较复杂的DOM结构,然后插入当前文档。这样做的好处在于,因为DocumentFragment不属于当前文档,对它的任何改动,都不会引发网页的重新渲染,比直接修改当前文档的DOM有更好的性能表现。
document.createDocumentFragment()

//设置属性
document.setAttribute('name','value')
//删除属性
document.romoveAttribute('name')

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

//添加子元素
//appendChild()
var aChild = element.appendChild(aChild);  //语法,element元素末尾添加aChild

var p = document.createElement("p");  //示例,创建p元素
document.body.appendChild(p);         //将p元素添加到body末尾

//insertBefore()
//语法 在parentNode内,将newNode添加到referenceNode前,如果refereNode省略则加在末尾
var insertedNode = parentNode.insertBefore(newNode, referenceNode); 

//删除页面元素下的子元素
parentNode.removeChild(childNode);

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

//add(value):将给定字符串值加入列表,如已存在,就不添加
//添加"current"类
div.classList.add("current");

//remove(value)
//删除"disabled"类
div.classList.remove("disabled");

//contains(value):判断是否存在给定值,存在返回true,否则false
div.classList.contains("bd")

//toggle(value):如果列表中已存在,删掉;不存在,就添加
//切换"user"类
//div.classList.toggle("user");

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

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</button>
</div>
<script>
//li
    document.getElementsByTagName('li')
    document.querySelectorAll('li')
//.btn
    document.getElementsByClassName('btn')
    document.querySelector('.btn')
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基本介绍 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且...
    草鞋弟阅读 475评论 0 0
  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元...
    QQQQQCY阅读 202评论 0 0
  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元...
    Taaaaaaaurus阅读 215评论 0 1
  • 1.概述 1.1DOM DOM是JavaScript操作网页的接口,全称为“文档对象模型”(Document Ob...
    徐国军_plus阅读 404评论 0 3
  • 你曾发过不能轻易说的晚安 如今一句, 拜 便让我彻夜难眠 总认为不合时机 可你,是我一直追寻的梦啊
    Dolph阅读 125评论 0 1