有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

js 获取操作dom节点方法

javascript cat 10个月前 (11-26) 37次浏览 已收录 0个评论 扫描二维码

1、获取节点

1、节点

加载 HTML 页面时,web 浏览器生成一个树型结构,用来表示页面内部结构,称之为 DOM树,DOM 将这种树型结构理解为由节点组成。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 家谱树 -->
    <p>11111111</p>
    <ul id="ul1">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</body>

</html>

2、子节点

父级.children:返回元素节点(在IE8及以下,会返回注释节点,在IE9及以下,正常返回)

父级.childNodes:在IE9及以上,返回的包括换行节点,在IE8及以下,只返回元素节点

返回的都是一个类数组、伪数组,是一个对象。它们有长度,有下标,可以通过下标获取某一个

var li = ul.children;
console.log(li);

var li = ul.childNodes;
console.log(li);

3、节点基本属性

节点.nodeType

节点.nodeName

节点.nodeValue

<p>11111111</p>
<ul id="ul1">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
</ul>

<script>
    var p = document.querySelector('p');
    var ul = document.getElementById('ul1');
    var li = ul.childNodes;

    // 节点.nodeType:节点类型,用1--12的数字来代表12种类型
    // 1:元素节点  2:属性节点  3:文本节点  9:文档节点
    console.log(p.nodeType); // 1
    console.log(ul.nodeType); // 1
    for (var i = 0; i < li.length; i++) {
        console.log(li[i].nodeType);
    }

    // 节点.nodeName:节点名称,元素节点就是大写标签名,文本节点就是#text
    console.log(p.nodeName); // P
    console.log(ul.nodeName); // UL
    for (var i = 0; i < li.length; i++) {
        console.log(li[i].nodeName);
    }

    // 节点.nodeValue:节点内容
    // 它认为文本节点才有内容,元素节点没有内容
    console.log(p.nodeValue);
    console.log(p.childNodes[0].nodeValue); // 11111111
    console.log(p.innerText); // 11111111

</script>

4、父节点

元素.parentNode 返回父级

元素.offsetParent 返回离它最近的有定位属性的父级,如果没有定位的父级,则返回body

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
var box3 = document.getElementById('box3');

console.log(box3.parentNode); // box2
console.log(box3.offsetParent);

5、其它节点

<ul id="list">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
</ul>

<script>
    var ul = document.getElementById('list');

    // 第一个子节点
    // 父级.firstChild : 在标准浏览器有可能返回的是文本节点,在IE8及以下,只返回第一个元素节点
    // 父级.firstElementChild : 在标准浏览器返回第一个元素节点,而在IE8及以下,没有这个方法
    // console.log(ul.firstChild);
    // console.log(ul.firstElementChild);
    var first = ul.firstElementChild || ul.firstChild;
    first.style.backgroundColor = 'red';

    // -----------------------------
    // 最一个子节点
    // 父级.lastChild
    // 父级.lastElementChild
    var last = ul.lastElementChild || ul.lastChild;
    last.style.backgroundColor = 'pink';

    // -----------------------------
    // 下一个兄弟节点
    // 元素.nextSibling
    // 元素.nextElementSibling
    var next = first.nextElementSibling || first.nextSibling;
    next.style.backgroundColor = 'green';

    // -----------------------------
    // 上一个兄弟节点
    // 元素.previousSibling
    // 元素.previousElementSibling
    var prev = last.previousElementSibling || last.previousSibling;
    prev.style.backgroundColor = 'yellow';
</script>

2、操作节点

1、创建节点

创建标签:document.createElement(标签名);

创建文本:document.createTextNode(文本);

2、追加节点

父元素.appendChild(子元素);

子元素添加到父元素中,放到最后

3、插入节点

父元素.insertBefore(要插入的节点, 参考的节点);

要插入的节点放在参考元素的前面

4、删除节点

父元素.removeChild(被删除的元素)

返回被删除的元素

5、替换节点

父元素.replaceChild(新的节点,被替换的节点);

6、克隆节点

被克隆的元素.cloneNode(布尔);

返回克隆出来的新节点,如果参数为true,则克隆子孙节点,如果为false,则只克隆当前这个标签

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址