HTML元素的操作_代码007(未授权)

本文介绍: 获取文本内容1.先获取元素的内容2.使用innerText方法设置文本内容获取div中的html代码 innerHTML方法将html代码覆盖到div中更新HTML元素创建html元素 createElement（）创建文本节点 createTextNode（）将文本节点追加到 li 节点中的末尾 appendChild()改变HTML中的元素获取元素的父级HTML部分JavaScript根据ID获取元素部分获取元素的父级parentBode：属性返回元素或节

获取文本内容

1.先获取元素的内容

2.使用innerText方法

    let btn = document.getElementById("btn");
    //获取文本内容
    console.log(btn.innerText);

设置文本内容

btn.innerText= "测试数据";
let box = document.getElementById("box");

获取div中的html代码 innerHTML方法

console.log(box.innerHTML);

将html代码覆盖到div中

//将html代码 覆盖到div中
box.innerHTML = "<h2>测试数据</h2>";
let a = document.getElementsByTagName("a");

 let ul = document.createElement("ul");

 let li1 = document.createElement("li");

let text1 = document.createTextNode("列表项1");

 li1.appendChild(text1);
 ul.appendChild(li1);
let li2 = document.createElement("li");

<body>
<ul id="ul">
    <li id="first">列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li id="last">列表4</li>
</ul>
<script>
    let ul = document.getElementById("ul");
    let first = document.getElementById("first");
    let last = document.getElementById("last");
    // 通过父级删除子集
    // ul.removeChild(first);
    //删除当前元素
    // first.remove();
    //替换内容
    // let repLi = document.createElement("li");
    // repLi.innerText = '列表项4的替换内容';
    // ul.replaceChild(repLi,last);

    let instLi = document.createElement("li");
    instLi.innerText = '列表项1前插入的内容';
    ul.insertBefore(instLi,first);

</script>
</body>

<div id="box">
    <ul id="ul">
        <li><a href="#">列表项目1</a></li>
        <li id="two"><a href="#">列表项目2</a></li>
        <li><a href="#">列表项目3</a></li>
        <li><a href="#">列表项目4</a></li>
    </ul>
</div>

let box = document.getElementById("box");
let ul = document.getElementById("ul");
let two = document.getElementById("two");

parentBode：parentNode 属性返回元素或节点的父节点

parentELement：parentElement 属性返回指定元素的父元素。

parentElement 和 parentNode 的区别在于，如果父节点不是元素节点，则 parentElement 返回 null；

console.log(ul.parentNode);
console.log(ul.parentElement);

childNodes： childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合

children： children 属性返回元素的子元素的集合，根据子元素在元素中出现的先后顺序进行排序。使用 HTML Collection对象的 length属性获取子元素的数量，然后使用序列号(index，起始值为0)访问每个子元素。

console.log(box.childNodes);
console.log(box.children);

firstElementChild： firstElementChild 属性返回指定元素的第一个子元素

console.log(ul.firstChild);
console.log(ul.firstElementChild);

lastChild：lastChild 属性返回指定节点的最后一个子节点，以 Node 对象。

lastElementChild：lastElementChild 属性返回指定元素的最后一个子元素。

      console.log(ul.lastChild);
      console.log(ul.lastElementChild);

previousSibling：previousSibling 属性返回同一树级别的上一个节点，以 Node 对象。如果没有 previousSibling 节点，则返回值是 null。

previousElementSibling：previousElementSibling 属性返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）

      console.log(two.previousSibling);
      console.log(two.previousElementSibling);

nextSibling：nextSibling 属性返回同一树级别上的下一个节点。nextSibling 返回下一个同胞节点：元素节点、文本节点或注释节点。元素之间的空白也是文本节点。

      console.log(two.nextSibling);
      console.log(two.nextElementSibling);

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

html 元素获取

获取HTML的值

更新HTML元素

改变HTML中的元素

获取元素的父级

发表回复取消回复

获取HTML的值

更新HTML元素

改变HTML中的元素

获取元素的父级

相关文章

发表回复 取消回复

发表回复取消回复