<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div> 我是div <h1>我是标题</h1> <p>我是段落</p> </div> <script type="text/javascript"> /*let oDiv = document.querySelector("div");
console.log(oDiv.innerHTML);
console.log(oDiv.innerText);
console.log(oDiv.textContent);
/*
1.innerHTML获取的内容包含标签, innerText/textContent获取的内容不包含标签
2.innerHTML/textContent获取的内容不会去除两端的空格, innerText获取的内容会去除两端的空格
*/ // 2.设置元素内容 /*
特点:
无论通过innerHTML/innerText/textContent设置内容, 新的内容都会覆盖原有的内容
区别:
如果通过innerHTML设置数据, 数据中包含标签, 会转换成标签之后再添加
如果通过innerText/textContent设置数据, 数据中包含标签, 不会转换成标签, 会当做一个字符串直接设置
*/ let oDiv = document.querySelector("div"); // oDiv.innerHTML = "123"; //oDiv.innerText = "456"; //oDiv.textContent = "789"; //oDiv.innerHTML = "我是span"; //oDiv.innerText = "我是span"; //oDiv.textContent = "我是span"; setText(oDiv, "www.it666.com"); function setText(obj,text) { if("6" in obj) { obj.textContent = text
console.log(obj.textContent); } else { obj.innerText = text
console.log(obj.innerText ); } } //可以看出，if ( key in obj) 意思是 obj 中是否有 key 属性 ，有则返回 true， 没有则返回 false。 </script> </body> </html>
dom啦6 增删改查元素的内容
关注
打赏
