JavaScript DOM对象之innerText属性简介说明


摘要:
下文讲述DOM对象之innerText属性的功能简介说明,如下所示:


DOM之innerText属性说明

DOM之innerText属性:
用于获取DOM元素中的文本内容或设置DOM元素中的文本内容,
innerText属性是一个可读可写属性。
DOM之innerText语法说明:
1.获取元素中的文本内容
textContent=domObj.innerText
——参数说明—-
domObj:待获取文本内容的html元素
textContent:innerText属性返回的文本信息
2.设置元素中的html内容
domObj.innerText=textContent
——参数说明—-
domObj:待设置文本内容的html元素
htmlContent:即将放入html元素中的“文本内容”

DOM之innerText属性注意事项:
1.此属性目前可运行于市面上所有浏览器上
2.innerText属性值获取时,会获取DOM元素下所有子元素的文本内容
3.innerText属性值设置时,会擦除DOM元素下所有信息,然后再将文本内容写入


DOM之innerText属性举例演示

例:
DOM innerText属性应用举例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---DOM innerText属性举例说明
</title>
<style>
  p{
    width:100px;
	height:100px;
	line-height:100px;
	padding-left:10px;
	background-color:green;
	color:white;font-weight:bold;
  }
</style>
<script> 
window.onload=function(){

  let btn1 = document.getElementById("btn1");
  let btn2 = document.getElementById("btn2");
  
  //设置innerText属性
  btn1.onclick = function(){
	let odiv = document.getElementById("container");
      odiv.innerText = "<p>猫猫教程</p>"; 
  }

  //获取innerText属性
   btn2.onclick = function(){
	let odiv = document.getElementById("container");
      alert(odiv.innerText); 
  }

  
}
</script>
</head>
<body>
<div id="container"></div>

<div><input type="button" id="btn1" value="innerText属性设置" /></div>
<div><input type="button" id="btn2" value="innerText属性获取" /></div>
</body>
</html>


代码解析:
使用innerText向html元素中写入信息,作为字符串放入指定元素下

DOM对象之innerText属性举例说明

DOM对象之innerText属性举例说明

JavaScript DOM对象之innerHTML属性简介说明


摘要:
下文讲述DOM对象之innerHTML属性的功能简介说明,如下所示:


DOM之innerHTML属性说明

DOM之innerHTML属性:
用于获取DOM元素中的html内容或设置DOM元素中的html内容,
innerHTML属性是一个可读可写属性。
DOM之innerHTML语法说明:
1.获取元素中的html内容
htmlContent=domObj.innerHTML
——参数说明—-
domObj:待获取html内容的html元素
htmlContent:innerHTML属性返回的html信息
2.设置元素中的html内容
domObj.innerHTML=htmlContent
——参数说明—-
domObj:待设置html内容的html元素
htmlContent:即将放入html元素中的html内容

DOM之innerHTML属性注意事项:
1.此属性目前可运行于市面上所有浏览器上
2.innerHTML属性值获取时,会将DOM元素下所有子元素都获取
3.innerHTML属性值设置时,会擦除DOM元素下所有信息,然后再将新的html信息写入


DOM之innerHTML属性举例演示

例:
DOM innerHTML属性应用举例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---DOM innerHTML属性举例说明
</title>
<style>
  p{
    width:100px;
	height:100px;
	line-height:100px;
	padding-left:10px;
	background-color:green;
	color:white;font-weight:bold;
  }
</style>
<script> 
window.onload=function(){

  let btn1 = document.getElementById("btn1");
  let btn2 = document.getElementById("btn2");
  
  //设置innerHTML属性
  btn1.onclick = function(){
	let odiv = document.getElementById("container");
      odiv.innerHTML = "<p>猫猫教程</p>"; 
  }

  //获取innerHTML属性
   btn2.onclick = function(){
	let odiv = document.getElementById("container");
      alert(odiv.innerHTML); 
  }

  
}
</script>
</head>
<body>
<div id="container"></div>

<div><input type="button" id="btn1" value="innerHTML属性设置" /></div>
<div><input type="button" id="btn2" value="innerHTML属性获取" /></div>
</body>
</html>


代码解析:
使用innerHTML向html元素中写入信息后,浏览器会将写入的信息进行解析,然后输出

DOM对象之innerHTML属性举例说明

DOM对象之innerHTML属性举例说明

JavaScript DOM之nextElementSibling属性功能简介说明


摘要:
下文讲述 DOM之nextElementSibling属性的功能简介说明,如下所示:


nextElementSibling属性功能

nextElementSibling属性功能:
返回指定DOM元素相邻的下一个节点(此节点必须为html元素节点)
nextElementSibling属性语法:
elementNodeReference.nextElementSibling;
——参数说明—-
elementNodeReference:待检索的节点信息
——返回值说明——
返回当前节点的相邻前一个节点

nextElementSibling属性注意事项:
1.此属性兼容目前市面上所有流行浏览器
2.当不存在相邻的下一个元素节点时,返回null


nextElementSibling属性举例说明

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---nextElementSibling属性举例说明
</title>
<style type="text/css"> 
body{font-size:12px}
#container{
    overflow:hidden;
    width:280px;
}
#container li{
    list-style-type:none;
    height:22px;
    text-align:left;
    text-indent:15px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  let oli = document.getElementsByTagName("li")[1];
  let odiv = document.getElementById("messageInfo");
  let previousNode = oli.nextElementSibling;
  odiv.innerHTML = previousNode.nodeName; 
}
</script>
</head>
<body>
<div id="container">
  <ul>
    <li>maomao365.com------1</li>
	<li>maomao365.com------2</li>
    <li>maomao365.com------3</li>
    <li>maomao365.com------4</li>
    <li>maomao365.com------5</li>
  </ul>
</div>
<div id="messageInfo"></div>
</body>
</html>


代码详解:
//此代码输出 “li” 因为第二个li向后相邻的html元素节点为”LI”