DOM
2017-01-20 本文已影响0人
BAMO
1.DOM对象的innerText和innerHTML有什么区别
innerText:返回元素内包含的内容，如果元素内签到多层元素则由浅到深依次拼接在一起
<body>
<ul id="list">
<p>
123
<span>456</span>
</p>
</ul>
</body>
<script>
var List=document.getElementById('list');
var output=List.innerText
console.log(output)
console.log(List.innerHTML)
console.log(List.outerHTML)
</script>
2.elem.children和elem.childNodes的区别
<body>
<ul id="list">
<p>
123
<span>456</span>
</p>
<p>第二个段落</p>
<p>第三个</p>
</ul>
</body>
<script>
var List=document.getElementById('list');
var output=List.innerText
console.log('-------这是分割线------')
console.log(List.children)
console.log(List.childNodes)
3.查询元素有几种常见的方法？ES5的元素选择方法是什么？
- getElementById()
- getElementByTagName()
- getElementByClassName()
- getElementByName()
-
ES5选择方法
- querySelector()
- querySelectorAll()
- elemenFromPoint()
4.如何创建一个元素？如何给元素设置属性？如何删除属性？
- createElement()
var newDiv=document.creatElement('div')
//在DOM下创建一个div标签
- createTextNode()
var newDiv=document.createElement('div')
var newContent=document.createTextNode('hello world')
//用来生成文本节点，参数为所要生成的文本节点内容
- createDocumentFragment()
var docFrangment=document.createDocumentFragment();
//用来生成一个DocumentFragment();
5.如何给页面元素添加子元素？如何删除页面元素下的子元素？
- appendChild()
var newDiv =document.createElement('div')
var newContent=document.createTextNode('hello')
newDiv.appendChild(newContent)
- removeChild()
6.element.classList有哪些方法？如何判断一个元素的class列表中包含某个class？如何删除一个class？
element.classList的方法
- classList.add()用来增加一个class
- classListremove()用来删除一个class
- classList.toggle('visible',i<num);增加/删除visible,取决测试条件
- classList.contains()用来判断一个元素的class列表中是否包含某个class
7.如何选中如下代码所有的li元素？如何选择btn元素？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
代码：
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
</body>
<script>
var getNode=document.querySelectorAll('li') // 选择所有的li
var btn =docunemt.querySelector('.btn')//获取类名为btn的元素
console.log(getNode);
console.log(btn);
</script>
