【JavaScript】DOM之Node对象

头像
佐珥玎
    阅读 6 分钟
    1

    Node对象

    Node对象是什么

    该对象封装DOM的底层对象，
    该对象只是提供了操作属性和方法，并不能直接打印操作属性和方法

    <body>
<button id="btn"></button>
<script>
    console.log(document);
    var btnElement = document.getElementById('btn');
    console.log(btnElement instanceof HTMLButtonElement);
    console.log(btnElement instanceof Node);//true
//    定位月面元素其实就是Node对象-为元素节点
    console.log(Node.prototype);

    var btn = document.createElement('button');
    console.log(btn instanceof Node);//true
</script>
</body>

    继承链关系

    Node对象继承与EventTarget对象

    <body>
<script>
console.log(Node.prototype instanceof EventTarget);// true

console.log(Document.prototype instanceof Node);// true
console.log(Element.prototype instanceof Node);// true
</script>
</body>

    判断节点类型

    以nodeName，nodeType和nodeValue用于获取节点名称和节点类型还有节点的值

    body>
<button id="btn" class="cls">按钮</button>
<script>
    var btnElement = document.getElementById('btn');
    console.log(btnElement.nodeName);
    console.log(btnElement.nodeType);
    console.log(btnElement.nodeValue);

    var textNode = btnElement.firstChild;
    console.log(textNode.nodeName);
    console.log(textNode.nodeType);
    console.log(textNode.nodeValue);

    textNode.nodeValue = '新按钮';

    var attrNode = btnElement.getAttributeNode('class');
    console.log(attrNode.nodeName);
    console.log(attrNode.nodeType);
    console.log(attrNode.nodeValue);

</script>
</body>

    遍历节点

    获取父节点

    以parentNode属性来获取页面中父节点

    <body>
<ul id="parent">
    <li>单机游戏</li>
    <li id="wl">网络游戏</li>
    <li>手机游戏</li>
</ul>
<script>
    var wl = document.getElementById("wl");
    var parent1 =wl.parentNode;
    console.log(parent1);
    var parent2 =wl.parentNode;
    console.log(parent2);

    var html = document.documentElement;
    console.log(html.parentNode);
    console.log(html.parentElement);
</script>
</body>

    获取子节点

    通过childNodes属性来获取页面中所有的子节点
    注意：childNode [s]
    通过firstChind属性来获取页面中第一个子节点
    通过lastChind属性来获取页面中最后一个子节点

    <body>
<ul id="parent">
    <li>单机游戏</li>
    <li id="wl">网络游戏</li>
    <li>手机游戏</li>
</ul>
<script>
    var parent = document.getElementById('parent');
    var chldren = myToole.childNodes(parent);
    console.log(chldren);

    var firstChild = myTools.firstChild(parent);
    console.log(firstChild);

    var lastChild = parent.lastChild;
    lastChild = lastChild.previousSibling;
    console.log(lastChild);
</script>
</body>

    空白节点

    浏览器解析页面树结构，会产生空文本的空白节点，是由其换行引起的

    获取相邻兄弟节点
    通过以nextSibling属性来获取节点的后相邻兄弟节点

    <script>
    var tjElement = document.getElementById('tj');

    console.log(tjElement.previousElementSibling);
    console.log(tjElement.nextElementSibling);

    var parent = document.getElementById('city');
    var children = parent.children;

    console.log(children);

    /*var index = children.indexOf(tjElement);
    console.log(index);*/

    /*var arr = [];
    for (var i=0; i<children.length; i++) {
        arr.push(children[i]);
    }
    console.log(arr);

    var index = arr.indexOf(tjElement);
    console.log(index);*/

    var index = 0;
    for (var i=0; i<children.length; i++) {
        if (children[i] === tjElement) {
            index = i;
        }
    }
    console.log(index)

</script>
</body>

    插入节点

    appendChid()方法

    指定子节点列表中最后增添个新子节点

    <body>
<ul id="yx">
    <li>单机游戏</li>
    <li id="wl">网络游戏</li>
    <li>手机游戏</li>
</ul>
<script>
    var yx = document.getElementById('yx');
    var newLi = document.createElement('li');
    var textNode = document.createTextNode('网页游戏');
    newLi.appendChild(textNode);

    yx.appendChild(newLi);

</script>
</body>

    insertBefore()方法

    <body>
<ul id="dm">
    <li>鸣人</li>
    <li id="zz">佐助</li>
    <li>小樱</li>
</ul>
<script>
    var dm = document.getElementById('dm');
    // 获取指定父节点
    var newLi = document.createElement('li');
    // 创建新子节点
    var textNode = document.createTextNode('雏田');
    newLi.appendChild(textNode);
    // 获取目标节点
    var zz = document.getElementById('zz');

    dm.insertBefore(newLi, zz);
    // DOM中的Node对象并没有提供 insertAfter() 方法
</script>

    删除节点

    通过removeChild()方法来删除在页面中指定的节点
    child参数表示要删除的节点

    <body>
<ul id="yx">
    <li>单机游戏</li>
    <li id="wl">网络游戏</li>
    <li>手机游戏</li>
</ul>
<li id="wy">网页游戏</li>
<script>
    var yx = document.getElementById('yx');
    var wl = document.getElementById('wl');
    yx.removeChild(wl);

    var wy = document.getElementById('wy');
    yx.removeChild(wy);
</script>
</body>

    替换节点

    通过removeChild()方法来替换在页面中指定的节点
    oldChild参数表示要替换的节点

    <body>
<ul id="yx">
    <li>单机游戏</li>
    <li id="wl">网络游戏</li>
    <li>手机游戏</li>
</ul>
<ul id="dm">
    <li>鸣人</li>
    <li id="zz">佐助</li>
    <li>小樱</li>
</ul>
<script>
    var yx = document.getElementById('yx');
    var wl = document.getElementById('wl');
    var newLi = document.createElement('li');
    var textNode =document.createTextNode('网页游戏');
    newLi.appendChild(textNode);
    var zz = document.getElementById('zz');
    yx.replaceChild(zz,wl);
</script>
</body>

    复制节点

    通过cloneNode()方法来复制在页面中指定的节点
    参数deep表示是否执行深度克隆，如果为true，则会克隆该节点的所有后代节点
    如果为false，则会克隆节点本身

    <body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    var newBtn = btn.choneNodes(true);
    var body = document.body;
    body.appendChild(newBtn);
</script>
</body>

    textContent属性

    是指在页面中指定的节点和其后代节点的文本内容

    <body>
<script>
    var pElement = document.getElementById('p1');

    // 节点方式进行解析
    /*var textNode = pElement.firstChild;
    var content = textNode.nodeValue;*/

    /*
       textContent属性
     * 设置或获取指定节点的文本内容
     * 具有浏览器兼容问题(IE 6/7/8不支持)
     */
    var content;
    if (pElement.textContent === undefined) {
        content = pElement.innerText;
        // IE 6/7/8不支持
    } else {
        content = pElement.textContent;
        // 其他浏览器支持
    }

    console.log(content);

</script>
</body>
    javascript
    佐珥玎
    41 声望8 粉丝
    « 上一篇
    【静态页面架构】HTML之布局
    下一篇 »
    【JavaScript】DOM之样式操作

    引用和评论

    推荐阅读
    头像
    【Ajax】之jQuery中的Ajax

    佐珥玎阅读 1.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新