JavaScript学习笔记-更改DOM元素

It has been 1485 days since the last update, the content of the article may be outdated.

更新DOM

修改节点的文本，方法有两种：

修改innerHTML属性
这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

javascript

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改

修改innerText或textContent属性
这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

javascript

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。

修改CSS

DOM节点的style属性对应所有的CSS，可以直接获取或设置。
因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize：

html

<!-- HTML结构 -->
<div id="test-div">
  <p id="test-js">javascript</p>
  <p>Java</p>
</div>

javascript

// 获取<p>javascript</p>节点:
var js = document.getElementById("test-js");

// 修改文本为JavaScript:
 js.innerHTML='JavaScript'

// 修改CSS为: color: #ff0000, font-weight: bold
 js.style.color = '#ff0000';
 js.style.fontWeight = 'bold'

试验

html

<!Doctype>
<html>
<head>
<meta charset="utf-8"></meta>
<title>js test</title>
<script>
function change(clas){
	var js=document.getElementById(clas);
	js.innerHTML=js.innerHTML.toUpperCase();
	js.style.color='#f00';
	js.style.fontSize= 50;

}
</script>

</head>

<body>
<script>
function changecolor()
{
	element=document.getElementById("test-js")
	element.innerHTML=element.innerHTML.toLowerCase();
	element.style.color='#000';
	element.style.fontSize= 20;
}
</script>

<div id="test-div">
  <p id="test-js" onclick=changecolor()>javascript</p>
  <p>Java</p>
  
  <button type='button' onclick=change('test-js')>click me</button>
</div>

</body>
</html>