dom啦6 增删改查元素的内容
<!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>我是span</span>";
//oDiv.innerText = "<span>我是span</span>";
//oDiv.textContent = "<span>我是span</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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/09/05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
