DOM操作

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

innerText：返回的是元素的文本内容，如果该元素包含子元素结构，则会把子元素的文本内容拼接然后返回。
innerHtml：返回的是元素的DOM结构(文本内容和标签)，在写入的时候也会自动构建DOM。

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

elem.children：只输出普通的DOM元素，返回子元素列表(HTMLCollection)类型。
elem.childNodes：会输出所有的子元素，包括文本节点和数字，返回子元素列表(NodeList)类型。

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

getElementById()返回指定ID属性的元素节点。如果发现没有指定的节点，则返回null。这是获取元素最快的方法
getElementsByClassName()返回一个类似数组的对象，包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。
getElementsByTagName()返回所有指定标签的元素。
getElementsByName()用于选择拥有name属性的HTML元素，返回一个NodeList格式的对象，不会实时反映元素的变化。
ES5的元素选择方法：
querySlector()返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
querySelectorAll()返回匹配指定的CSS选择器的所有节点。

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

createElement()用来创建HTML元素节点，参数为元素的标签名。如果参数带有尖括号（即<和>）或者是null，会报错。

  var newDiv = document.createElement("div");

createTextNode()用来创建文本节点，参数为所要生成文本节点的内容。

   var newDiv = document.createElement("div");
    var newContent = document.createTextNode("hello");

createDocumentFragment()创建DocumentFragment对象

  new newFragment = document.createDocumentFragment();

createAttribute()创建一个新的属性对象节点，并返回它。

  attribute = document.createAttribute(name);

给元素设置属性使用setAttribute()方法

  var node = document.getElementById("div1");
  node.setAttribute("my_attrib", "newVal");

获取元素的attribute值使用getAttribute()方法

  node.getAttribute('id');

删除元素属性使用removeAttribute()方法

  node.removeAttribute('id');

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

appendChild()在元素末尾添加元素

  var newDiv  = document.createElement("div");
  var newContent = document.CreateTextNode("hello");
  newDiv.appendChild(newContent);

insertBefore()在某个元素之前添加元素

  var newDiv  = document.createElement("div");
  var newContent = document.CreateTextNode("hello");
  newDiv.insertBefore(newContent,newDiv.firstChild);

replaceChild()接受两个参数：要插入的元素和要替换的元素

 newDiv.replaceChild(newElement,oldElement);

删除元素使用removeChild()方法

  parentNode.removeChild(childNode);

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

add 新增class方法
remove 删除class方法
toggle 新增/删除切换
contains 判断是否包含某个class

  var nodeBox = document.querySelector(".box");
  console.log(nodeBox.classList);
  nodeBox.classList.add('active'); //新增class
  nodeBox.classList.remove('active');   //删除class
  nodeBox.classList.toggle('active');   //新增/删除切换
  nodeBox.classList.contains('acitve')  //判断是否包含某个class

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

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</button>
</div>
<script type="text/javascript">
  var li = document.createElementsByTagName('li');
  //var li1 = document.querySelectorAll('.mode-tabs ul li');
  var btn = document.createElementByClassName('btn');
  //var btn1 = document.createElementByTagName('button');
</script>

最后编辑于：2017.12.10 20:29:57