JavaScript

来源：互联网发布：淘宝经营类目编辑：程序博客网时间：2024/06/16 02:31

参考资料w3school

简介

DOM为Document Object Model缩写，即为文档对象模型。
可以通过DOM访问JS HTML所有的元素。
HTML DOM 模型被构造为对象的树。
DOM 树
这里写图片描述
通过DOM，JS能动态的改变HTML

JS 改变所有的HTML元素
JS改变所有的HTML属性
JS改变所有的页面的CSS样式
JS能对所有事件作出反应

使用

一、查找元素

有三种方法

id查找
标签名查找
类名查找

id查找

查找id = “JinCheng”的元素

var x = document.getElementById('JinCheng');

如果找到，返回改元素，如果没有，返回null。

标签名查找

下列就是查找id = ‘idName’的元素的所有< p >元素

var x = document.getElementById('idName');var y = x.getElementsByTagName('p')

通过类名查找在IE 5-8中无效

二、改变HTML

1.改变输出流
JS中，document.write()直接向HTML输出流写内容

<script>document.write(Date());</script>

输出当前时间
如 “Sun Aug 06 2017 14:41:15 GMT+0800 (CST)”

2.改变HTML内容
改变HTML元素内容，使用下面的语法

document.getElementById("idName").innerHTML="New text!";

3.改变HTML属性
改变HTML属性，使用这个语法

document.getElementById(id).attribute=new value

<!DOCTYPE html><html><body><img id = "image" src = "smiley.gif"><script>document.getElementById<"image">.src = "landscape.jpg";</script></body></html>

三、HTML DOM 改变CSS

JS改变HTML元素样式(CSS)

document.getElementById(id).style.property=new style

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

三、HTML DOM 事件

1.点击

<h1 onclick = "this.innerHTML = '金城已点击'">快点我</好>

2.点击后调用事件

<script>funtion changeText(id){id.innerTHML = "金城已点击";}</script><body><h1 onclick="changeText(this)">请点击该文本</h1></body>

3.向 button 元素分配 onclick 事件：

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

4.onload 和onunload事件
onload加入页面触发，检测浏览器类型和版本。
onunload离开页面触发。
他们都可以处理cookie

<!DOCTYPE html><html><body onload="checkCookies()"><script>function checkCookies(){if (navigator.cookieEnabled==true)    {    alert("已启用 cookie")    }else    {    alert("未启用 cookie")    }}</script><p>提示框会告诉你，浏览器是否已启用 cookie。</p></body></html>

5.onchange事件
用户改变字段内容，会触发onchange

<input type="text" id="fname" onchange="upperCase()">

6.onmouseover 和 onmouseout 事件
onmouseover 鼠标移动到元素时触发
onmouseout 鼠标离开元素时触发

6.onmousedown、onmouseup 以及 onclick 事件
onmousedown 鼠标点击触发
onmouseup 释放鼠标触发
onclick 完成点击

四、HTML DOM 元素（节点）

1.添加

先创建，再添加

<div id="div1"><p id="p1">这是一个段落</p><p id="p2">这是另一个段落</p></div><script>//创建新的<p>元素var para=document.createElement("p");//向<p>元素添加文本，先创建文本节点var node=document.createTextNode("这是新段落。");//再添加para.appendChild(node);//找到已有的元素var element=document.getElementById("div1");//向已有的元素添加新元素element.appendChild(para);</script>

2.删除

删除元素，向获得父元素

supper.removeChild(child);

<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div><script>//找到父元素var supper=document.getElementById("div1");//找到子元素var child=document.getElementById("p1");//删除parent.removeChild(child);</script>

阅读全文

0 0