JavaScript HTML DOM

HTML DOM 树

JavaScript 能够改变页面中的所有 HTML 元素，所有 HTML 属性，所有 CSS 样式，所有事件做出反应

一.查找 HTML 元素

代码片段：

<div id="div1" class = "class1">
     <p id="p1">找到我</p>
</div>
<div class="class1">
     <p> 类</p>
</div>

1.通过 id 找到 HTML 元素

var x = document.getElementById("div1");
2.通过标签名找到 HTML 元素

var x = document.getElementByTagName("p");
3.通过类名找到 HTML 元素

var x = document.getElementClassName("class1");

alert(x.length);

二.HTML DOM 允许 JavaScript 改变 HTML 元素的内容

1.改变HTML的输出流

document.write();//使用需要注意，防止在网页把所有文档加载完毕后，再调用它，它会覆盖所有的文档

2.改变HTML内容

document.getElementById("p1").innerHTML = new value;

3.改变HTML属性

<img id="change_image" />

document.getElementById("change_image").src=new value;

4.改变HTML样式

<div id="c_div">

<p> 颜色</p>

</div>

document.getElementById("c_div").style.color = "red";

三.JavaScript HTML DOM 事件

javascript中较常用的事件

onactivate：(当控件对象为活动元素时触发)
onblur：（使用在表单元素中，当元素失去焦点的时候执行）
onchange：（使用在表单元素中，当某些东西改变是执行）
onclick：（鼠标点击一个元素时执行）
ondblclick：（鼠标双击一个元素时执行）
ondeactivate：（当活动元素从当前控件对象变为父文档或者其他控件对象时触发）
ondrag：（当进行拖拽操作时在源控件对象上持续触发）
ondragend：（当用户在拖拽操作结束后释放鼠标时，在源控件对象上触发）
ondragenter：（当用户拖拽控件对象到一个合法拖拽目标时，在目标元素上重触发）
ondragleave：（当用户在拖拽操作过程中将鼠标移出合法拖拽目标时，在目标控件对象上触发）
ondragover：（当用户拖拽控件对象划过合法拖拽目标时，持续在目标元素上触发）
ondrgstart：（当用户开始拖拽文本选中区或选中控件对象时在源控件对象上触发）
onfocus：（使用在表单元素中，当元素获得焦点时执行）
onkeydown： （按下某个按键时执行）
onkeypress：（按下和释放某个按键时执行）
onkeyup：（释放某个按键时执行）
onmousedown：（按下鼠标按键时执行）
onmousemove：（鼠标光标在元素上移动时执行）
onmouseout：（鼠标光标移开元素时执行）
onmouseover：（鼠标光标移到元素上时执行）
onmouseup：（当释放鼠标按键时执行）
onmouseenter：（当用户将鼠标指针移动到控件对象内时触发）
onmouseleave：（当用户将鼠标指针移出控件对象边界时触发）
onreset：（用在表单元素中，当表单重置时执行）
onresize：（当控件对象的大小要改变时触发）
onselect：（用在表单元素中，当元素被选择时执行）
onsubmit：（用在表单元素中，当表单提交时执行）
onload：（在body标签中使用，载入页面的时候执行）
onunload：（用在body标签中，当关闭页面时执行）

四.JavaScript HTML DOM 元素

创建新的 HTML 元素

<script>
function addiamge()
{
var parent = document.getElementById("image_box");//寻找存放img元素的地方（父节点）
var child = document.createElement("img");//新创img节点
child.src="https://img-blog.youkuaiyun.com/20140722164709848?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjk4ODk2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center";//赋值
parent.appendChild(child);//在父节点上添加孩子节点，没有添加的话就没有图片显示出来
}
</script>
<div id="image_box">
</div>
<button type="button" οnclick="addiamge()">点击显示图片</button>

删除已有的节点

parent.removeChild(child);//移除子节点