HTML元素的操作

获取HTML的值

获取文本内容

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");

更新HTML元素

创建html元素 createElement（）

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

创建文本节点 createTextNode（）

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

将文本节点追加到 li 节点中的末尾 appendChild()

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

改变HTML中的元素

<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>

获取元素的父级

HTML部分

<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>

JavaScript根据ID获取元素部分

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)访问每个子元素。

children 属性与 childNodes 属性的差别：

childNodes 属性返回所有的节点，包括文本节点、注释节点；
children 属性只返回元素节点；

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

获取子集的第一个元素包含换行

firstChild：选择属于其父元素的首个子元素的每个

元素，并为其设置样式；

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

firstElementChild 属性与 firstChild, 属性的区别在于 firstChild 返回第一个子节点作为元素节点，包含文本节点或注释节点（取决于哪个是第一个），而firstElementChild 返回第一个子节点作为元素节点（忽略文本和注释节点）。该属性是只读的。

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

获取子集的最后一个元素包含换行

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

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

lastElementChild 属性与 lastChild 属性的区别在于 lastChild 返回最后一个子节点作为元素节点，包含文本节点或注释节点（取决于哪个是最后一个），而 lastElementChild 返回最后一个子节点作为元素节点（忽略文本和注释节点）。该属性是只读的。

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

获取当前元素的前一个元素

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

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

previousSibling 属性与 previousElementSibling 属性的差别：

previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）；

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

获取当前元素的下一个元素

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

nextElementSibling：nextElementSibling 属性返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。

nextSibling 属性与 nextElementSibling 属性的差别：

nextSibling 属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）
nextElementSibling 属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/674252.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！