获取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);
原文地址:https://blog.csdn.net/2302_78070106/article/details/136074706
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_67887.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!