首页 > 代码库 > js_更新DOM
js_更新DOM
innerHTML不但可以修改DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树
// 获取<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>的内部结构已修改
(如果,写入的字符串是通过网络拿到,要注意对字符编码来避免XSS攻击)
innerText和textContent可以自动对字符串进行HTML编码,保证无法设置任何HTML标签
两者区别,innerText不返回隐藏元素的文本,而textContent返回所有文本。IE<9不支持textContent
// 获取<p id="p-id">...</p> var p = document.getElementById(‘p-id‘); // 设置文本: p.innerText = ‘<script>alert("Hi")</script>‘; // HTML被自动编码,无法设置一个<script>节点: // <p id="p-id"><script>alert("Hi")</script></p>
修改css也可以通过DOM的style来完成。如font-size命名不符合js有效的属性名,所以需要在js中写驼峰式命名fontSize
// 获取<p id="p-id">...</p> var p = document.getElementById(‘p-id‘); // 设置CSS: p.style.color = ‘#ff0000‘; p.style.fontSize = ‘20px‘; p.style.paddingTop = ‘2em‘;
练习
<!-- HTML结构 --> <div id="test-div"> <p id="test-js">javascript</p> <p>Java</p> </div>
‘use strict‘ / 获取<p>javascript</p>节点: var js = document.getElementById(‘test-js‘); // 修改文本为JavaScript: // TODO: js.innerHTML=‘JavaScript‘; // 修改CSS为: color: #ff0000, font-weight: bold // TODO: js.style.color=‘#ff0000‘; js.style.fontWeight=‘bold‘;
js_更新DOM
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。