JavaScript DOM文档对象

659 阅读2分钟

一、节点

  1. 文本节点,IE8以下空格节点获取不到。
  2. 元素节点 div
  3. 属性节点 classidvalue
  4. 注释节点
<div id="wrap">
    <div class="position">
        <div id="box" class="box1" data-title="这也是节点" abc="133">
            <!-- <div>
                <img src="1.jpg" />
            </div> -->
            你好吗!!!
            <span id="my-span">这是个span</span>
            <p>这是一个p标签</p>
            <ul>
                <li>这是li标签1</li>
                <li>这是li标签2</li>
                <li>这是li标签3</li>
            </ul>
        </div>
        <div id="box2"></div>
    </div>
</div>

二、获取节点

  1. 获取子代节点(动态获取)。ele.childNodes:文本节点、元素节点。ele.children:只获取元素节点。
  2. 获取第一个子代节点。ele.firstChild:返回第一个包括文本节点和注释节点。ele.firstElementChild:获取第一个元素节点。
  3. 获取最后一个子代节点。ele.lastChild:获取到文本和注释节点。ele.lastElementChild:获取最后一个元素节点。
  4. 获取父亲节点。ele.parentNode:获取父亲节点。ele.offsetParent:找到定位父级。
  5. 下一个兄弟节点。ele.nextSibling:获取到下一个节点,包括文本、注释节点。ele.nextElementSibling:只获取元素节点。
  6. 上一个兄弟节点。ele.previousSibling:获取到下一个节点,包括文本、注释节点。ele.previousElementSibling:只获取元素节点。
  7. 获取子元素节点的数量。ele.childElementCount

三、节点的操作

  1. 创建节点:document.createElement('nodename'),放标签名,创建元素节点,创建节点是document的方法,创建完的节点可以直接进行dom操作。
  2. 创建文本节点:createTextNode
  3. 删除节点:parentNode.removeChild(node),删除节点只能从父级开始删除,不能自己删除自己。
  4. 克隆节点:cloneNode(),克隆只克隆元素本身还有元素节点,不会克隆事件,可以接受一个布尔类型,若是true,则克隆子孙元素。
  5. 添加节点:parentNode.appendChild(node),只能从父级节点开始添加,添加位置在最后的子节点后面。
  6. 替换节点:parentNode.replaceChild(new, old),第一个用来替换新元素,第二个被替换元素。
  7. 在节点前添加节点:parentNode.insertBefore(new, old),第一个用来插入的新元素,第二个在这个元素前插入。
var oBox = document.getElementById('box'),
    oSpan = document.getElementById('my-span');
    oBox.onclick = function(){
        alert(1)
    }

    var oBox2 = oBox.cloneNode(true);
    wrap.appendChild(oBox2);
    console.log(oBox2)
var oP = document.createElement('p');
oP.innerHTML = '我是一个p标签';

oP.onclick = function() {
    alert('我是p标签的点击事件')
}
oBox.appendChild(oP);
		
var oText = document.createTextNode('我很好!!!');
oBox.appendChild(oText);
console.log(oText)

四、节点属性

  1. 获取节点属性。ele.getAttribute(key),节点名称,直接返回值。ele.getAttributeNode,返回节点对象。
  2. 设置节点属性。ele.setAttribute(key, value),不要用数字来当做key。ele.setAttributeNode(node),node是一个节点对象。
  3. 创建节点对象。document.createAttribute("nodeName"),创建完之后要设置value值。
  4. 删除节点对象。ele.removeAttribute(key)
  5. 节点类型。1--element--元素节点、3--#text--文本节点、8--#comment--注释节点、9--document--文档节点。
  6. tagName是只有元素节点才有,nodeName是所有节点都有。
var oBox = document.getElementById('box');
oBox.removeAttribute('abc');
console.log(document.nodeType);