记录7 DOM
2017-01-07 本文已影响0人
suhuanzhen
DOM的概念
当把HTML元素加载到浏览器中的时候，浏览器会把这个元素转换到一个类似于树的结构之中，这个树叫作DOM树。
一个简单的HTML文档的DOM树
浏览器为JavaScript提供了一套访问和修改这种树结构的方法，也就是操作DOM的方法合集。
使用getElementById选中一个元素
id 可以唯一地标识一个元素(每个 id 必须有一个唯一的值)，可以使用 DOM 方法 document.getElementById 来返回 "one" 元素。我们可以使用innerHTML属性获取并替换这个元素中的文本。
<div id="one">Rails is funny!</div>
<script type="text/javascript">
var temp=document.getElementById("one");
one.innerHTML="React is greate!";
</script>
浏览页面可以看到页面显示文本是"React is greate!"
小例子，实现：页面显示“Rails is funny!”，访问页面会弹出一个prompt框，在框中输入文本内容点击“OK”按钮，页面的显示内容就被替换为刚输入的内容。结合点击事件，可以实现交互操作----动态改变页面内容。
<body>
<div id="one">Rails is funny!</div>
<script type="text/javascript">
var temp=document.getElementById("one");
var newText=prompt("Please a new Text");
one.innerHTML=newText;
</script>
</body>
