dom啦6 增删改查元素的内容

最新推荐文章于 2023-03-30 10:52:21 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2023-03-30 10:52:21 发布

阅读量490

点赞数

分类专栏： JSDOM

本文链接：https://blog.csdn.net/qq_37805832/article/details/108414471

版权

JSDOM 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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

贵哥的编程之路(热爱分享)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
dom啦6 增删改查元素的内容

<!DOCTYPE html><html><head> <title></title></head><body><div> 我是div <h1>我是标题</h1> <p>我是段落</p></div><script type="text/javascript"> /*let oDiv = docu
复制链接

扫一扫