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

2020-10-28 12:24:55 浏览数 (1)

代码语言:javascript复制
<!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>
dom

0 人点赞