DOM 对象,用来操作 html 和 xml功能的一类对象的集合 (注意:css不可以被操作)
标签也就是 DOM 元素
选择元素 方法的操作:
- documnet 代表整个文档
- document.getElementById(); 【按Id名选择 一个】
//html
<div id="only">hello world</div>
//js
var div=document.getElementById('only')
document.getElementsByTagName();【按标签名选择 一组】
var div=document.getElementsByTagName('div')
//通过标签名选择 把页面里面的所有div拿出来 存放在类数组中
var div=document.getElementsByTagName('div')[0]
//可以选择固定的标签 第一个div标签
- document.getElementsByClassName();【按class选择 一组】
var div=document.getElementsByClassName('two')
//可选择多个class名 类似于getElementsByTagName() 但是 IE8 以下的浏览器不支持
- document.getElementsByName(); 【按name选择 一组】
- document.querySelector(); 【按CSS格式选择 一个】
document.querySelectorAll();【按CSS格式选择 一组】
- 缺点:静态的(不是实时的) 后面操作对它无影响,不推荐使用 !!!
<body>
<div>
<strong class="demo"></strong>
</div>
<script type="text/javascript">
var div=document.querySelector('div strong.demo'); //可任意按CSS方式选择
</script>
</body>
便利节点树:
标签上的属性
- parentNode –> 父节点(最顶层的parentNode 为#decument 再往上为null
- childNodes –> 子节点们 (找到子节点们 *注:所有节点)
//例子1 查找一个div 所有的子节点
<div>
123
<strong></strong>
<span></span>
<em></em>
</div>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
</script>
- firstChild –>第一个子节点
- lastChild –>最后一个子节点
- nextSibling –>下一个兄弟节点
- previousSibling –>前一个兄弟节点
基于元素节点树的便利:
(除 children以外其余在IE9 以下不兼容)
- parentElement –>返回当前元素的父元素节点
children -->只返回当前元素的元素子节点(标签)
(node.children.length 当前元素的 元素子节点的个数)
(还是上面的例子1 此时结果就是div下的元素子节点)
- firstElementChild –>返回的是第一个元素节点
- lastElementChild –>返回的是最后一个元素的节点
- nextElementSibling /previousElementSibling –>返回后一个/前一个兄弟元素的节点
节点的四个属性:
nodeName:元素的标签名 以大写形式表示
,只读 (eg:STRONG)- nodeValue:Text节点或Comment节点的文本内容,只读写
nodeType:该节点的类型
,只读
节点的类型:(后面跟的是nodeType值)- 元素节点 ——1
- 属性节点 ——2
- 文本节点 ——3
- 注释节点 ——8
- document ——9
- DocumentFragment ——11
- attributes:Element节点的属性集合
- Node.hasChildNodes(); —>节点有没有子节点(返回 true / false)