DOM操作

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

innerText:
通过innerText读取值时,它会按照由浅入深的顺序将子文档树中的所有子文本节点拼接起来。在写入值时,会删除元素的所有字节点,插入包含文本节点与相应的文本值。

innerHTML:
在读模式下,innerHTML返回调用元素的所有子节点(包括元素,注释,文本节点)的对应html标签。在写模式下,innerHTML会根据指定的值 创建新的DOM树,然后新建的DOM树会完全替换调用元素之前的所有子节点。

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

elem.children:它返回指定元素的子元素集合,只返回html节点,不返回文本节点。
elem.childNodes:它是标准属性,返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点。

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

查询元素
1.document.getElementsByTagName方法返回所有指定HTML标签的元素,返回结果中,各个成员的顺序就是它们在文档中出现的顺序。
2.document.getElementsByClassName方法返回一个类似数组的对象,包括了所有class名字符合指定条件的元素。
3.document.getElementsByName方法用于选择拥有name属性的HTML元素,如<form>、<img>等。
4.getElementById方法返回匹配指定id属性的元素节点。

//返回当前文档的所有p元素节点
var els = document.getElementsByTagName('td');
//返回所有class=classname的所有元素。
var els = document.getElementsByClassName('classname');
//返回name属性为name的所有元素。
var els = document.getElementsByName('name');
//返回id为xxx元素。
var el = document.getElementById('xxx');

ES5的元素选择方法:
1.document.querySelector方法接受一个CSS选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。
2.document.querySelectorAll方法返回所有匹配给定选择器的节点。

// 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector(".myclass");

// 返回一个文档中所有的class为"xx"或者 "xxx"的div元素
var els = document.querySelectorAll(".xx, .xxx");

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

创建新元素
1.document.createElement(),该方法创建新的元素,这个方法只接受一个参数,就是要创建的新的元素标签名。如:

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

由于新元素未被加到文档树中,因此不会影响浏览器的显示,要用,appendChild(),或者insertBefore()把新元素添加到文档中。
2.使用document.createTextNode()来创建新的文本节点,这个方法接受一个参数,即要插入节点中的文本。
3.还可以使用appendChild()方法向节点添加最后一个子节点或者用insertBefore()在指定的已有的子节点之前插入新节点。(也不知道这两个算不算新创建一个元素)
如何给元素设置属性
使用setAttribute() 方法添加指定的属性,并为其赋指定的值。
如果这个指定的属性已存在,则仅设置/更改值。

    <input type="text" >   
<script>
     document.getElementsByTagName("input") [0].setAttribute("class","test");
</script>
Paste_Image.png

删除属性
使用removeAttribute() 方法删除指定的属性

  <input type="text" >   
<script>
  document.getElementsByTagName("input")[0].removeAttribute("class","test");
</script>
Paste_Image.png

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

使用appendChild()方法向节点添加最后一个子元素或者用insertBefore()在指定的已有的子节点之前插入新节点,这些方法通常与创建新节点的createElement()和createTextNode()方法配合使用。

1.
<body>
<ul id="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    var newLi=document.createElement("li");
    document.getElementById("demo").appendChild(newLi);
</script>
</body>

2.
<body>
<ul id="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    var newLi=document.createElement("li");
    var li=document.getElementsByTagName("li");
    document.getElementById("demo").insertBefore(newLi,li[1]);//插到第二个li的前面
</script>
</body>
Paste_Image.png
Paste_Image.png

删除子元素
1.使用element.remove()方法,

<div id="rele">删除元素</div>
<script>
   var rele=document.getElementById("rele");
    rele.remove();
</script>

2.removechild 函数可以删除父元素的指定子元素,如果此函数删除子节点成功,则返回被删除的节点,否则返回null。

<body>
<ul id="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
   var ul=document.getElementById("demo");
    var lis=ul.getElementsByTagName("li");
    ul.removeChild(lis[0]);
</script>
</body>
Paste_Image.png

返回第一个li

Paste_Image.png

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

classList 属性返回元素的类名,该属性用于在元素中添加,移除及切换 CSS 类,有以下这些方法:
1.add(class1, class2, ...):该方法在元素中添加一个或多个类名。如果指定的类名已存在,则不会添加 。

 <style>
        .myDiv{
            width: 200px;
            height: 200px;
            background: #2b2b2b;
        }
        .myDiv2{
            background: #ff0000;
        }
    </style>
</head>
<body>
  <div>测试</div>
<script>
   document.getElementsByTagName("div")[0].classList.add("myDiv","myDiv2");
</script>
</body>

未添加之前:

Paste_Image.png

添加之后:

Paste_Image.png

2.contains(class):该方法返回布尔值,判断指定的类名是否存在。
true - 元素包已经包含了该类名
false - 元素中不存在该类名

  <div class="myDiv">测试</div>
<script>
  console.log( document.getElementsByTagName("div")[0].classList.contains("myDiv"));//true
</script>```
3.item(index):返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null。

<body>
<div class="myDiv myDiv2">测试</div>
<script>
console.log( document.getElementsByTagName("div")[0].classList.item(0));//myDiv
</script>
</body>

4.remove(class1, class2, ...):移除元素中一个或多个类名
<style>
    .myDiv{
        width: 200px;
        height: 200px;
        background: #00ff00;
    }
    .myDiv2{
        background: #ff0000;
    }
</style>

</head>
<body>
<div class="myDiv myDiv2">测试</div>
<script>
document.getElementsByTagName("div")[0].classList.remove("myDiv2");
</script>

未移除之前:

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5572128-fa338b4aa641813a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
移除之后:

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5572128-3b446202f5922a8b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

5.toggle(class, true|false): 在元素中切换类名。

<style>
.myDiv{
width: 200px;
height: 200px;
background: #00ff00;
}
.myDiv2{
background: #ff0000;
}
</style>
</head>
<body>
<div class="myDiv">测试</div>
<button onclick="toggle()">点我切换</button>
<script>
function toggle(){
document.getElementsByTagName("div")[0].classList.toggle("myDiv2");
}

</script>

使用classList.contains()判断是否包含某个class。
使用classList.add()添加class。
使用classList.remove()删除元素的一个class。

## 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.getElementsByTagName("li");

var lis=document.querySelectorAll("li");

选中btn:
  1. var btn=document.getElementsByClassName("btn");

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


推荐阅读更多精彩内容

  • 基本介绍 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且...
    草鞋弟阅读 147评论 0 0
  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元...
    Taaaaaaaurus阅读 87评论 0 1
  • 节点 节点类型 每个节点都有一个 nodeType 属性,用于表示节点类型。nodeType 属性返回节点的类型。...
    练晓习阅读 202评论 0 5
  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元...
    QQQQQCY阅读 51评论 0 0
  • 细数这周,我是在繁忙中度过的。 我临时起意,说要和朋友一起参加一个学校的视频大赛。 我只有简单的摄影基础和剪视频基...
    忘南川Lethe阅读 155评论 4 3