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>
未移除之前：
移除之后：
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:
- var btn=document.getElementsByClassName("btn");
var btn=document.querySelector('.btn')
网友评论