DOM

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

  • innerText: 是一个可写属性,返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容;
    "66666
    77777"
    
  • innerHTML: 作用和innerText类似,但是不是返回元素的文本内容,而是返回元素的HTML结构,在写入的时候也会自动构建DOM;
    "
        <h1>66666</h1>
        <p>77777</p>
      "
    

elem.children和elem.childNodes的区别?

  • elem.children 属性返回一个动态的 HTMLCollection 集合,由当前节点的所有 Element 子节点组成;
  • elem.childNodes 属性返回一个 NodeList 集合,成员包括当前节点的所有子节点。注意,除了 HTML 元素节点,该属性返回的还包括 Text 节点和 Comment 节点。如果当前节点不包括任何子节点,则返回一个空的 NodeList 集合。由于 NodeList 对象是一个动态集合,一旦子节点发生变化,立刻会反映在返回结果之中。

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

  • getElementById() 返回匹配指定 ID 属性的元素节点。如果没有发现匹配的节点,则返回 null。这也是获取一个元素最快的方法;
    var elem = document.getElementById("test");
    
  • getElementsByClassName() 返回一个类似数组的对象(HTMLCollection 类型的对象),包括了所有 class 字符符合指定条件的元素(搜索范围包括本身),元素的变化实时反映在返回结果中。这个方法不仅可以在 document 对象上调用,也可以在任何元素节点上调用;
    var elements = document.getElementsByClassName('tab');
    
    getElementsByClassName 方法的参数,可以是多个空格分隔的 class 名字,返回同时具有这些节点的元素
    document.getElementsByClassName('red test')
    
  • getElementsByTagName() 返回所有指定标签的元素(搜索范围包括本身)。返回值是一个 HTMLCollection 对象,也就是说,搜索结果是一个动态集合,任何元素的变化都会实时返回到集合中。这个方法不仅可以在 document 对象上调用,也可以在任何元素节点上调用。
    var paras = document.getElementsByTagName("p");
    
    上面代码返回当前文档的所有p元素节点。注意,getElementsByTagName 方法会将参数转为小写后,再进行搜索
  • getElementsByName() 用于选择拥有 name 属性的 HTML 元素,比如 form、img、frame、embed 和 object,返回一个 NodeList 格式的对象,不会实时反应元素的变化。
    // 假定有一个表单是<form name="x"></form>
    var forms = document.getElementsByName("x");
    forms[0].tagName // "FORM"
    
    注意,在IE浏览器使用这个方法,会将没有name属性、但有同名id属性的元素也返回,所以name和id属性最好设为不一样的值

ES5 选择元素方法

  • querySelector() 返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回 null。
    var el1 = document.querySelector(".myclass");
    var el2 = document.querySelector('#myParent > [ng-click]');
    
    querySelector 方法无法选中CSS伪元素。
  • querySelectorAll() 返回匹配指定的CSS选择器的所有节点,返回的是 NodeList 类型的对象。NodeList 对象不是动态集合,所以元素节点的变化无法实时反映在结果中
     elementList = document.querySelectorAll(selectors)
    
    querySelectorAll 方法的参数,可以是逗号分隔的多个CSS选择器,返回所有匹配其中一个选择器的元素。
    var matches = document.querySelectorAll("div.note, div.alert");
    
    上面代码返回class属性是note或alert的div元素。

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

  • createElement() 用来生成 HTML 元素节点。createElement 方法的参数为元素的标签名,即元素节点的 tagName 属性。如果传入大写的标签名,会被转为小写。如果参数带有尖括号(即<>)或者是 null,会报错。
    var newDiv = document.createElement("div");
    
  • createTextNode() 用来生成文本节点,参数为所要生成的文本节点的内容。
    var newContent = document.createTextNode("Hello");
    
  • createDocumentFragment() 方法生成一个DocumentFragment对象。
    var docFragment = document.createDocumentFragment();
    
    DocumentFragment 对象是一个存在于内存的DOM片段,但是不属于当前文档,常常用来生成较复杂的DOM结构,然后插入当前文档。这样做的好处在于,因为 DocumentFragment 不属于当前文档,对它的任何改动,都不会引发网页的重新渲染,比直接修改当前文档的DOM有更好的性能表现。

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

  • 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);
    
  • 删除元素,使用 removerChild() 方法即可
    parentNode.removeChild(childNode);
    

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

  • 方法:
    • add():增加一个或者多个 class,如果指定的类名已存在,则不会添加;
    • remove():删除一个或多个 class,删除不存在的 class 不会报错;
    • contains(class):检查当前元素是否包含某个 class,返回布尔类型;
    • toggle(class, true|false):将某个 class 移入或移出当前元素,可以接受一个布尔值,作为第二个参数。如果为true,则添加该属性;如果为false,则去除该属性;
    • item(index):返回指定索引位置的 class, 索引从零开始;
    • toString():将 class 的列表转为字符串。

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

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</button>
</div>
  • 选中 li 元素
    document.getElementsByTagName('li')
    document.querySelectorAll('.mod-tabs li')
    
  • 选中 btn 元素
    document.getElementsByTagName('button')
    document.getElementsByClassName('btn')
    document.querySelector('.mode-tabs .btn')