DOM 查找节点

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）

猜你喜欢