JS 学习（三）DOM

HTML DOM（文档对象模型）

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

　　HTML DOM树:

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

查找HTML元素

通过 id 找到 HTML 元素，是最简单的方式

<p id="intro">Hello World!</p>
<script>
    x=document.getElementById("intro");
    document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');
</script>

Hello World!
id="intro" 的段落中的文本是：Hello World!

通过标签名找到 HTML 元素

<div id="main">
    <p>The DOM is very useful.</p>
</div>

<script>
    var x = document.getElementById("main");
    var y = x.getElementsByTagName("p");
    document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>

The DOM is very useful.
id 为 "main" 的 div 中的第一段文本是：The DOM is very useful.

通过类名找到 HTML 元素，在IE5、6、7、8中无效

JS HTML DOM改变HTML

改变HTML输出流

<script>
    document.write(Date());
</script>
Tue Aug 16 2016 13:45:37 GMT+0800 (CST)
注意： 绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变HTML内容
- 语法： document.getElementById(id).innerHTML=new HTML

<p id="p1">Hello World!</p>
<script>
    document.getElementById("p1").innerHTML="New text!";
</script>
New text!

改变HTML属性
- 语法： document.getElementById(id).attribute=new value

<img id="image" src="/i/eg_tulip.jpg" />
<script>
    document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";
</script>

JS改变HTML元素的样式

语法： document.getElementById(id).style.property=new style

<p id="p2">Hello World!</p>
<script>
    document.getElementById("p2").style.color="blue";
</script>


<h1 id="myH">Hello World!</h1>
<button type="button" onclick="document.getElementById('myH').style.color='red'">点击这里！</button>

<p id="p1">这是一段文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

JS HTML DOM 事件

HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

<head>
<script>
function changetext(id) {
    id.innerHTML="谢谢!";
}
</script>
</head>
<body>
    <h1 onclick="changetext(this)">请点击该文本</h1>
</body>

HTML事件属性

<button onclick="displayDate()">点击这里</button>
<script>
function displayDate() {
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

使用HTML DOM来分配事件

<button id="myBtn">点击这里</button>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate() {
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

onload 和 onunload 事件
- onload 和 onunload 事件会在用户进入或离开页面时被触发。
  onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
  onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">
<script>
function checkCookies() {
    if (navigator.cookieEnabled==true) {
        alert("已启用 cookie")
    } else {
        alert("未启用 cookie")
    }
}
</script>

onchange 事件

<head>
<script>
function myFunction() {
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
    请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
    <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
</body>

onmouseover 和 onmouseout 事件
- onmouseover 鼠标移至HTML元素上方
- onmouseout 鼠标移出元素时

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面
</div>
<script>
function mOver(obj) {
    obj.innerHTML="谢谢"
}
function mOut(obj) {
    obj.innerHTML="把鼠标移到上面"
}
</script>

onmousedown、onmouseup 以及 onclick 事件
- onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
- 首先当点击鼠标按钮时，会触发 onmousedown 事件
- 当释放鼠标按钮时，会触发onmouseup 事件
- 最后，当完成鼠标点击时，会触发 onclick 事件。

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">请点击这里
</div>

<script>
function mDown(obj) {
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj) {
    obj.style.backgroundColor="green";
    obj.innerHTML="请按下鼠标按钮"
}
</script>

onfocus 获得焦点

点击了哪个鼠标

<head>
<script type="text/javascript">
function whichButton(event) {
    var btnNum = event.button;
    if (btnNum == 2) {
        alert("您点击了鼠标右键！")
    }
    else if(btnNum == 0) {
        alert("您点击了鼠标左键！")
    }
    else if(btnNum == 1) {
        alert("您点击了鼠标中键！");
    }
    else {
        alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
    }
}
</script>
</head>

<body onmousedown = "whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
</body>

光标的坐标

<head>
<script type="text/javascript">
function show_coords(event) {
    x=event.clientX
    y=event.clientY
    alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>

<body onmousedown="show_coords(event)">
</body>

相对于屏幕光标的位置

<script type="text/javascript">
function coordinates(event) {
    x=event.screenX
    y=event.screenY
    alert("X=" + x + " Y=" + y)
}

</script>
</head>
<body onmousedown="coordinates(event)">

</body>

被按的按键的unicode

<head>
<script type="text/javascript">
function whichButton(event) {
    alert(event.keyCode)
}
</script>
</head>

<body onkeyup="whichButton(event)">
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。 </p>
</body>

JS HTML DOM 元素（节点）

向HTML DOM添加元素，必须先创建该元素，然后向一个已经存在的元素中追加该元素

<div id="div1">
<p id="p1">这是一个段落。</p>
</div>

<script>
    var para=document.createElement("p");
    var node=document.createTextNode("这是新段落。”);  // 向p元素中添加文本，必须首先创建文本节点
    para.appendChild(node);

    var element=document.getElementById("div1");
    element.appendChild(para);
</script>

DOM 的CURD

创建新的HTML元素

<p id="word">我是p标签</p>
<script>
    // 1.直接往body中动态的添加标签(可以是任意类型)
    document.write('helloWorld');
    document.write('<img src="image/img_01.jpg">');

    // 2. 创建一个新的标签,然后插入到body中任意的一个标签中 appendChild
    var div = document.createElement('div');
    div.style.background = 'red';
    div.style.width = '500px';
    div.style.height = '300px';
    // 添加到父标签
    document.body.appendChild(div);

    // 往div中插入一张图片
    var img = document.createElement('img');
    img.src = 'image/img_02.jpg';
    div.appendChild(img);

    //3. 拿到p标签
    var img1 = document.createElement('img');
    img1.src = 'image/img_03.jpg';

    var p = document.getElementById('word');
    p.appendChild(img1);
</script>

删除HTML元素

删除有3种方式:
- 1.直接用body进行删除,但是只能作用于直接子标签
  - document.body.removeChild(p);
- 2.拿到当前标签的父标签,再来删除
  - p.parentNode.removeChild(p);
- 3.直接拿当前的标签,调用 remove()方法.
  - p.remove();

DOM 教程：http://www.w3school.com.cn/htmldom/index.asp