dom对象的innerText和innerHTML有什么区别？
- innerText的作用
主要用来获取元素的内部文本元素 - innerHTML的作用
主要用来获取元素内部的结构（标签啊，样式啊）还有内容
举个例子<div id="wrap"> <h1 class='tit'>这是标题</h1> <p class="content">这是段落</p> </div> <script> var wrap = document.getElementById('wrap') console.log(wrap.innerText)//这是标题 这是段落 console.log(wrap.innerHTML)//<h1 class="tit">这是标题</h1> //<p class="content">这是段落</p> </script>
elem.children和elem.childNodes的区别？
elem.children返回的将是元素子节点，而childNodes将返回所有的子节点类型，包括一大堆的换行和空格的#text节点,一般情况建议使用children,这样通过数组的下标更能精准的访问每一个子节点.
举个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="wrap">
<h1 class='tit'>这是标题</h1>
<p class="content">这是段落</p>
</div>
</body>
</html>
<script>
var wrap = document.getElementById('wrap');
console.clear();
console.log(wrap.children);
//children 的控制台显示内容
(2) [h1.tit, p.content]
length: 2
0: h1.tit
1: p.content
__proto__: HTMLCollection
</script>
console.log(wrap.childNodes);
console.log(wrap.childNodes);所获取的内容
查询元素有几种常见的方法？ES5的元素选择方法是什么?
- document.getElementById('id')
- document.getElementsByClassName(样式名称)
- document.getElementsByName(拥有name属性的HTML元素)
- document.getElementsByTagName(标签名称)
ES5的选择器 - document.querySelector('css的选择器')
- document.querySelectorAll('css的选择器')返回CSS选择器的所有节点
如何创建一个元素？如何给元素设置属性？如何删除属性
创建生成HTML节点元素
createElement()
获取元素属性
getAttribute()
给元素设置属性
setAttribute()
删除属性
removeAttribute()
上面相关方法的例子
var newDiv = document.createElement("div");//创建一个div标签
var newCon = document.createTextNode("我是内容节点");//生成一段文本内容
var className = newDiv.getAttribute('class');//获取div上的class名称
newDiv.setAttribute('class','test');//添加名称为test的class属性
newDiv.setAttribute('id','yezhu');//添加名称为yezhu的ID属性
newDiv.appendChild(newCon);//把创建好的名为newCon的内容添加到div里面去
newDiv.removeAttribute('id');//删除标签上的id属性
如何给页面元素添加子元素？如何删除页面元素下的子元素?
var newDiv = document.createElement("div");
var pDiv = document.createElement("p");
var newCon = document.createTextNode("我是内容节点");
pDiv.appendChild(newCon);//把创建好的名为newCon的内容添加到p标签里面去
newDiv.appendChild(pDiv);把p标签添加到新生成的div标签里面
console.log(newDiv);
newDiv.removeChild(pDiv);//删除div里面的子标签p
console.log(newDiv);
element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
element.classList的方法
- contains(String) 检测元素的类属性中是否存在指定的值。
- add(String[,String])添加指定的类值。如果已存在元素属性中的话那么它们则被忽略。
- remove(String[,String])删除指定的类值。
- item(Number)按集合中的索引返回类值。
- toggle(String[,force])当只有一个参数时，即类值存在，则删除并返回false。如果不存在，则添加并返回true。当存在第二参数时，第二参数计算结果为true，则添加指定的类值，计算结果为false，则删除它。
var newDiv = document.createElement("div");
newDiv.setAttribute('class','yezhu');
newDiv.classList.add('pig','cat','lal','dk');
var num = newDiv.classList.item(3);
var tog = newDiv.classList.toggle('dk');
// 删除类的名称
// newDiv.classList.remove('pig','cat','lal','dk');
var boolen = newDiv.classList.contains('yezhu');
console.log(boolen);//true
console.log(newDiv);//<div class="ye pig cat lal dk>
console.log(num);//lal
console.log(tog);//若有dk 删除dk 返回false
如何选中如下代码所有的li元素？ 如何选中btn元素？
var btn = document.getElementsByClassName('btn');
//var btn = document.querySelector('btn');
var li = document.getElementsByTagName('li');
//var li = document.querySelectorAll('.mod-tabs>ul>li');
console.log(btn);
console.log(li);
