DOM操作

作者: 好好顽 | 来源:发表于2017-07-04 20:36 被阅读8次

JQuery 17
DOM (javascript DOM节点操作)
Vue解决了哪些问题
jQuery中的DOM操作
jQuery——DOM
jQuery中的DOM操作
会jquery 就能快速快速上手 vue？你仿佛在说笑
JQuery---dom相关节点操作
2018-07-19dojo
基本dom操作,数组操作

题目1： dom对象的innerText和innerHTML有什么区别？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="content">innertest <p>sasaf</p></div>
  <script>
    var elem = document.getElementById('content')
    console.log(elem.innerText)//innertest sasaf
    console.log(elem.innerHTML)//innertest <p>sasaf</p>
  </script>
</body>
</html>

innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容
而innerHTML属性虽然作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM

题目2： elem.children和elem.childNodes的区别？


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="content">热门游戏<div>我是子节点</div> </div>
  <script>
    var elem = document.getElementById('content')
    console.log(elem.children)// ["热门游戏" ,<div>我是子节点</div>]
    console.log(elem.childNodes)// ["<div>我是子节点</div>"]
  </script>
</body>
</html>

element.children只输出普通的DOM元素,elem.children 属于HTMLCollection对象；
element.childNodes会输出所有的子元素，包括文本节点、文字,elem.childNodes 属于NodeList对象；
最大的区别就是HTMLCollection是元素集合，而NodeList是节点集合（即可以包含元素，也可以包含文本节点，即元素之间的空白或换行也属于文字节点，注释也属于文本节点）

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

函数	功能
getElementById()	指定ID找元素
getElementsByClassName()	指定class找元素
getElementsByTagName()	指定元素标签找元素
getElementsByName()	指定name属性找元素
querySelector()	ES5支持，参数写法可按照CSS选择器，返回单个元素
querySelectorAll()	ES5支持，参数写法可按照CSS选择器，返回多个元素
elementFromPoint()	指定位置找元素

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

函数	功能
createElement()	创建HTML元素
createTextNode()	创建文本节点
createAttribute()	创建属性
setAttribute()	设置属性
romoveAttribute()	删除属性

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

函数	功能
appendChild()	在元素末尾添加元素
insertBefore()	在某个元素之前插入元素
replaceChild()	替换元素
removeChild()	删除子元素

// <div>
//  <span id="childSpan">foo bar</span>
// </div>

// 创建一个空的span元素节点
// 没有id,没有任何属性和内容
var sp1 = document.createElement("span");

// 添加一个id属性,值为'newSpan'
sp1.setAttribute("id", "newSpan");

// 创建一个文本节点
var sp1_content = document.createTextNode("新的span元素的内容.");

// 将文本节点插入到span元素中
sp1.appendChild(sp1_content);

// 获得被替换节点和其父节点的引用.
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// 用新的span元素sp1来替换掉sp2
parentDiv.replaceChild(sp1, sp2);

// 结果:
// <div>
//   <span id="newSpan">新的span元素的内容.</span>
// </div>

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

add( String [, String] )添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。
remove( String [,String] )删除指定的类值。
item ( Number )按集合中的索引返回类值。
toggle ( String [, force] )当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回 false，如果不存在，则添加它并返回true。当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
contains( String )检查元素的类属性中是否存在指定的类值。

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

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

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