JavaScript核心（持续更新二）

最新推荐文章于 2024-05-20 20:45:15 发布

蒲竺

最新推荐文章于 2024-05-20 20:45:15 发布

阅读量957

点赞数 8

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/syh_syh0321/article/details/127881533

版权

本文详细讲解了JavaScript中的节点操作，包括增删改、属性操作、层级关系等，并通过多个案例展示了如何使用JavaScript操作DOM节点的属性和CSS样式。主要内容包括：创建与删除节点、节点属性的获取与设置、层级关系的处理、CSS样式操作等。

摘要由CSDN通过智能技术生成

JavaScript核心

三、节点操作

页面元素节点的操作，都离不开DOM对象

3.1节点操作-增删改

document.createElement() 用来生成网页元素节点，参数为元素的标签名；

document.createTextNode() 用来生成文本节点，参数为所要生成的文本节点的内容；

node.appendChild() 接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点；

node.hasChildNodes() 返回一个布尔值，表示当前节点是否有子节点

node.removeChild() 接受一个子节点作为参数，用于从当前节点移除该子节点

node.cloneNode() 用于克隆一个选中的节点。它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。 注意: 不会克隆绑定到该元素上的事件；

node.innerHTML 返回该元素包含的 HTML 代码。该属性可读写，常用来设置某个节点的内容；（不属于W3C DOM规范）

node.innerText

返回该元素包含的内容。该属性可读写

<body>
    <div id="d">
        <span>111</span>
    </div>
</body>
<script>
    //创建元素节点
    var p = document.createElement('p');
    //创建文本节点
    var t = document.createTextNode('女娲');
    //添加节点
    p.appendChild(t);
    var d = document.querySelector('#d')
    d.appendChild(p);

    //判断是否有子节点
    if(d.hasChildNodes('span')){
        var s = document.querySelector('span');
        //删除子节点
        d.removeChild(s);
    }

    // 克隆一个节点
    var c = d.cloneNode(true);
    d.appendChild(c);

	//操作选中元素的HTML代码，有值则是设置，无值则是获取
    alert(d.innerHTML);
    
    console.log(document.getElementById('d').innerText);
    console.log(document.getElementById('d').innerHTML);
</script>

案例：

点击按钮创建img节点，添加到body中

<body>
    <input type="button" value="我要图" id="btn">
</body>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        // var img = document.createElement('img');
        // img.src = '/img/c2.jpg';
        // document.getElementsByTagName('body')[0].appendChild(img);
        
        // 直接
        document.getElementsByTagName('body')[0].innerHTML += "<img src='/img/c3.jpg'>";
    }
</script>

动态创建文本框

<body>
    <input type="button" value="++" id="btn">
    <div id="bo"></div>
</body>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        // document.getElementById('bo').innerHTML += '<input type="text">';
        
        var inp = document.createElement('input');
        document.getElementById('bo').appendChild(inp);
    }
</script>

3.2节点属性

3.2.1原生属性

HTML元素节点的标准属性（即在标准中定义的属性），会自动成为元素节点对象的属性

<body>
    <div id="d" a="b" class="a b c d e"></div>
</body>
<script>

    var d = document.querySelector('#d');
    //获取原有属性值
    console.log(d.id);
    //修改原有属性值
    d.id = 'ff';
    console.log(d.a); // undefined
    //特殊：获取class类名，需使用className属性
  	console.log(d.className);
    d.className += ' hello';
</script>

3.2.2属性操作的标准方法

node.getAttribute() 返回当前元素节点的指定属性。如果指定属性不存在，则返回null；

node.setAttribute() 为当前元素节点新增属性。如果同名属性已存在

<body>
    <div id="d"></div>
</body>
<script>
    var d = document.querySelector('#d');
    //设置属性，有则修改，无则添加，可设置非标准属性
    d.setAttribute('id','ffdd');
    d.setAttribute('aa','kk');
    //获取属性值，可获取非标准属性
    console.log(d.getAttribute('aa'));
</script>
node.hasAttribute() 返回一个布尔值，表示当前元素节点是否包含指定属性
node.removeAttribute() 从当前元素节点移除属性
//如果有id属性
if(d.hasAttribute('id')){
    //删除id属性
    d.removeAttribute('id');
}

3.3节点操作-层级关系

node.nextElementSibling 返回紧跟在当前节点后面的第一个同级Element节点，如果当前节点后面没有同级节点，则返回null；

node.previousElementSibling 返回紧跟在当前节点前面的第一个同级Element节点，如果当前节点前面没有同级节点，则返回null；

node.parentElement 返回当前节点的父级Element节点；

node.childNodes 返回一个NodeList集合，成员包括当前节点的所有子节点(注意空格回车也算)。

node.firstChild

返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。

node.lastChild

返回该节点的最后一个子节点，如果该节点没有子节点则返回null。

<body>
    <div id="d1">
        <p id="p1">11111</p>
        <p id="p2">222</p>
        <p id="p3">33333</p>
        <p id="p4">4444</p>
    </div>
    <div id="d2">
        <p id="p5">55555</p>
        <p id="p6">66666</p>
    </div>
</body>
<script>
    var p2 = document.querySelector('#p2');
    //下一个兄弟节点
    p2.nextElementSibling.style.background = 'red';
    //上一个兄弟节点
    p2.previousElementSibling.style.background = 'red';
    //父级节点
    p2.parentElement.style.background = 'red';

    var d1 = document.querySelector('#d1');
	//所有子节点列表
    d1.childNodes[3].style.background = 'red';
</script>

3.4css样式操作

每个DOM对象都有style属性，我们可以直接操作，用来读写 行内CSS样式。之前，我们已经简单的使用过JS控制元素的CSS样式；在具体使用的时候还有一些需要重点注意的细节：

名字需要改写，将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写：

background-color写成backgroundColor

属性值都是字符串，设置时必须包括单位：

div.style.width的值不能写为100，而要写为100px