DOM 文档对象模型
document对象
document.doctype
document.head
document.location
document.location.href
document.location.protocol
document.location.host
document.location.hostname
document.location.port
document.location.search
document.location.hash
document.location.user
document.location.password
document.location.assign('http://www.google.com')
document.location.reload(true)
document.location.reload(false)
document.location.assign('http://www.google.com')
document.location.toString()
document.open()
document.close()
document.write()
Elementy对象
Element对象表示HTML元素
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点,DOM提供了一系列的方法可以进行元素的增、删、改、查操作
Element有几个重要的属性
nodeName
nodeType
className
id
children
childNodes
firstChild
lastChild
nextSibling
previousSibling
parentNode、parentElement
getElementById()
getElementsByClassName()
getElements
题目1: dom对象的innerText和innerHTML有什么区别?
Element.innerHTML 属性设置或获取描述元素后代的HTML语句。Element.innerText innerText是一个可写属性,返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容
题目2: elem.children和elem.childNodes的区别?
children: 子元素列表(HTMLCollection) 当前元素子元素的集合
childNodes: 子元素列表(NodeList) 当前元素子元素以及文本的集合
题目3:查询元素有几种常见的方法?ES5的元素选择方法是什么?
getElementById()
var elem = document.getElementById("test")
getElementsByClassName()
var elem = document.getElementsByClassName('tab')
getElementsByTagName()
var paras = document.getElementsByTagName('p')
ES5的方法:
querySelector()
querySelectorAll()
题目4:如何创建一个元素?如何给元素设置属性?如何删除属性
通过createElement()方法创建元素
通过setAttribute()方法给元素设置属性
通过removeAttribute()方法删除属性
题目5:如何给页面元素添加子元素?如何删除页面元素下的子元素?
appendChild() 在元素末尾添加元素
insertBefore() 在某个元素之前插入元素
removeChild() 接受两个参数:要插入的元素和要替换的元素
题目6: element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
//div 是具有class = 'foo bar'的<div>元素的对象引用
div.classList.remove('foo');
div.classList.add('anotherclass');
//如果visible被设置 则删除它 否则添加它
div.classList.toggle('visible');
//添加/删除 visible,取决于测试条件 小于10
div.classList.toggle('visible', i < 10);
alert(div.classList.contains('foo'));
//添加或删除多个类
div.classList.add('foo', 'bar');
div.classList.remove('foo', 'bar');
题目7: 如何选中如下代码所有的li元素? 如何选中btn元素?
7.png<script>
//选中所有的li元素
document.getElementsByTagName('li')
document.querySelectorAll('li')
//选中btn元素
document.getElementsByClassName('btn')
document.querySelector('.btn')
</script>
网友评论