DOM操作

2017-09-11 本文已影响0人 zh_yang

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

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

<div class="d1">
    <a href="">点我</a><img src="" alt="">
</div>
<script>
    var text  = document.querySelector(".d1").innerText;
    var html = document.querySelector(".d1").innerHTML;
    console.log(text);//"点我"
    console.log(html);//"<a href="">点我</a><img src="" alt="">"
</script>

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

elem.children只包括子元素对象。
elem.childNodes包括所有的子元素对象和文本节点。
举例：

<div class="d1">
    <a href="">点我</a>
    <img src="" alt="">
</div>
<script>
    console.log(document.querySelector(".d1").children);
    console.log(document.querySelector(".d1").childNodes);
</script>
//[a, img]
//[text, a, text, img, text]

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

常见六种：getElementById()、getElementsByClassName()、getElementsByTagName()、getElementsByName()、querySelector()、querySelectorAll()（ES5），后两种是ES5的元素选择方法

getElementById()
getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法

var elem = document.getElementById("test");

getElementsByClassName()
getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

var element = document.getElementsByClassName('tab')[0];
var element2 = element.getElementsByClassName('tab2')[0];

getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。

document.getElementsByClassName('red test');

getElementsByTagName()（不区分大小写）
getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

var paras = document.getElementsByTagName("p");

getElementsByName()
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属性最好设为不一样的值。

querySelector()（ES5）
querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
querySelector方法无法选中CSS伪元素。

querySelectorAll()（ES5）
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。

var matches = document.querySelectorAll("div.note, div.alert");

上面代码返回class属性是note或alert的div元素。

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

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

DOM操作一般有元素节点、属性节点、文本节点的操作。

创建DOM节点

创建元素节点：createElement()
createElement方法用来生成HTML元素节点。

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

createElement方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

创建元素的属性节点：createAttribute()
createAttribute()方法生成一个新的属性对象节点，并返回它。

attribute = document.createAttribute(name);

createAttribute方法的参数name，是属性的名称。

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

var newContent = document.createTextNode("Hello");

上面代码新建一个文本节点

创建DOM片段：createDocumentFragment()
createDocumentFragment方法生成一个DocumentFragment对象。

var docFragment = document.createDocumentFragment();

DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。

clone元素
cloneNode()方法用于克隆元素，方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身

node.cloneNode(true);

增、删、改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);

删除元素节点：

removeChild()方法

parentNode.removeChild(childNode);

更改元素节点：

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

newDiv.replaceChild(newElement, oldElement);

添加元素内容：innerHTML
innerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外层div的innerHTML返回内容是 "<p>123<span>456</span></p>"

增、删、改、查DOM属性节点：

查找、获取属性节点：getAttribute()
getAttribute()用于获取元素的attribute值

node.getAttribute('id');

设置、更改、添加属性节点：setAttribute()

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

等同于

var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);

删除属性节点：romoveAttribute()

node.removeAttribute('id');

element.attributes

当然上面的方法做的事情也可以通过类操作数组属性element.attributes来实现

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

element.classLis方法有t有add( )、remove( )、toggle( )、contains( )

判断是否包含 class：element.classList.contains( 'class' )，返回true/false

<div class="d1">
    <a href="">点我</a>
    <img src="" alt="">
</div>
<script>
    console.log(document.querySelector(".d1").classList.contains( 'd1' );
    console.log(document.querySelector(".d1").classList.contains( 'd2' );
</script>
//true
//false

添加一个class：element.classList.add( 'class' )

<div class="d1">
    <a href="">点我</a>
    <img src="" alt="">
</div>
<script>
    console.log(document.querySelector(".d1").classList.contains( 'd2' ));
    document.querySelector(".d1").classList.add( 'd2' );
    console.log(document.querySelector(".d1").classList.contains( 'd2' ));
</script>
//false
//true

删除一个class：element.classList.remove( 'class' )

<div class="d1">
    <a href="">点我</a>
    <img src="" alt="">
</div>
<script>
    console.log(document.querySelector(".d1").classList.contains( 'd1' ));
    document.querySelector(".d1").classList.remove( 'd1' );
    console.log(document.querySelector(".d1").classList.contains( 'd1' ));
</script>
//true
//false

切换（有则删、无则加）class：element.classList.toggle( 'class' )

<div class="d1">
    <a href="">点我</a>
    <img src="" alt="">
</div>
<script>
    console.log(document.querySelector(".d1").classList.contains( 'd1' ));
    document.querySelector(".d1").classList.toggle( 'd1' );
    console.log(document.querySelector(".d1").classList.contains( 'd1' ));
    document.querySelector(".d1").classList.toggle( 'd1' );
    console.log(document.querySelector(".d1").classList.contains( 'd1' ));
</script>
//true
//false
//true

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

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

选中所有的 li 元素

var lis = document.querySelectorAll( '.mod-tabs>ul>li' )

或

var lis = document.getElementsByTagName( 'li' )

或

var lis = document.getElementsByClassName( 'mod-tabs' )[0].children[0].children

选中 btn 元素

var btn = document.querySelector( '.btn' )

或

var btn = document.getElementsByTagName( 'button' )[0]

或

var btn = document.getElementsByClassName( 'mod-tabs' )[0].children[1]

DOM操作

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

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

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

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

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

创建DOM节点

增、删、改DOM元素节点：

增、删、改、查DOM属性节点：

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

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

猜你喜欢

热点阅读

DOM操作

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

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

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

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

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

创建DOM节点

增、删、改DOM元素节点：

增、删、改、查DOM属性节点：

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

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

猜你喜欢

热点阅读

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