（2020-09-08）javascript_7
1.javascripit HTML DOM
HTML------html标记
javascript------javascript对象/变量
我们现在需要通过javascript来改变html标记所呈现的样子/样式/位置等等。
那么这时我们就需要将html标记转换成javascript对象
将html标记转换成javascript对象---HTML DOM对象
DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Obiect Model）。
通过这个对象模型，javascript获得创建动态HTML的所有力量：
javascript 能改变页面中的所有HTML元素
javascript能改变页面中所有html 属性
javascript能改变页面中的所有css样式
javascript能删除已有的html元素和属性
javascript能添加新的html元素和属性
javascript能对页面中所有已有的html事件做出反应
javascript能在页面中创建新的html事件
通过html dom，javascript 能够访问和改变html文档的所有元素。
javascript-html dom方法
html dom 方法是您能够（在html元素上）执行的动作。
html dom 属性是您能够设置或改变的html元素的值。
下面的例子改变了id="demo"的<p>元素的内容：
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
getElementById 方法
getElementById 方法使用 id="demo" 来查找元素。
innerHTML 属性
//1.得到元素的内容
//var val=document.getElementById("demo").innerHTML;
//alert(val);
//2.改变元素的内容
document.getElementById("demo").innerHTML="hello,网星";
html dom document对象
文档对象代表您的网页
如果您希望访问html页面的任何元素，那么您总是从访问document对象开始。
查找html元素
document.getElementByid(id)-------------通过元素id来查找元素
document.getElementByTagName(name)----------通过标签名来查找元素
document.getElementByClassName(name)---------通过类名【class】来查找元素
1.document.getElementByid(id) 通过id查找html元素
如果元素被找到，此方法会以对象返回该元素（在myElement中）。
如果未找到元素，myElement将包含null。
当有html的id相同的时候，只能得到一个。
<script>
window.onload=function(){
document.getElementById("p1").innerHTML="hello";
}
</script>
2. document.getElementsByTagName(name) 通过标签名查找 HTML 元素
var p=document.getElementsByTagName("p");
var temp=1;
for(var i=0;i<p.length;i++){
p[i].innerHTML="第"+temp+"p元素";
temp++;
}
名称相同的元素组成一个数组。
document.getElementsByClassName(name) 通过类名查找 HTML 元素
var class_p=document.getElementsByClassName("p2");
for(var i=0;i<class_p.length;i++){
class_p[i].style.color = "blue";
}
class属性值相同的元素组成一个数组。
改变html元素
element.innerHTML=new html content--------------改变元素的inner HTML
element.attribute=new value------------------改变HTML元素的属性值
element.setAttribute(attribute，value)------------改变HTML元素的属性值
element.style.property=new style--------------改变HTML元素的样式
1. innerHTML 得到/改变元素的文本
<script>
window.onload=function(){
var parray=document.getElementsByTagName("p");
var temp=1;
for(var i=0;i<parray.length;i++){
parray[i].innerHTML="第"+temp+"p元素";
temp++;
}
alert(parray[3].innerHTML);
}
</script>
2. attribute 改变 HTML 元素的属性值
element.attribute = new value 这个语法规则中attribute 使用具体的html元素的属性名称来代替
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function addBoder(){
var tableObject=document.getElementById("mainTable");
tableObject.border="1px";
}
function addwidth(){
var tableObject=document.getElementById("mainTable");
tableObject.width="400px";
}
function addbgcolor(){
var tableObject=document.getElementById("mainTable");
tableObject.bgColor="red";
}
function addtrbgcolor(){
var trObject=document.getElementsByTagName("tr");
for(var i=0;i<trObject.length;i++){
if(i%2!=0){
trObject[i].bgColor="blue";
}
}
}
</script>
</head>
<body>
<input type="button" value="设置表格的边框" onclick="addBoder();"/>
<input type="button" value="设置表格的宽度" onclick="addwidth();"/>
<input type="button" value="设置表格的隔行变色" onclick="addtrbgcolor();"/>
<input type="button" value="设置表格的背景色" onclick="addbgcolor();"/>
<table id="mainTable" >
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
</table>
</body>
</html>
得到指定的html元素的对应的属性值
function getborder(){
var tableObject=document.getElementById("mainTable");
alert(tableObject.border);
}
3. setAttribute(attribute, value)改变 HTML 元素的属性值
attribute---html元素的属性名称
value-------html元素的属性名称的取值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function addBoder(){
var tableObject=document.getElementById("mainTable");
tableObject.setAttribute("border","1px");
}
function addwidth(){
var tableObject=document.getElementById("mainTable");
tableObject.setAttribute("width","400px");
}
function addbgcolor(){
var tableObject=document.getElementById("mainTable");
tableObject.setAttribute("bgcolor","red");
}
function addtrbgcolor(){
var trObject=document.getElementsByTagName("tr");
for(var i=0;i<trObject.length;i++){
if(i%2!=0){
trObject[i].setAttribute("bgcolor","blue")="blue";
}
}
}
</script>
</head>
<body>
<input type="button" value="设置表格的边框" onclick="addBoder();"/>
<input type="button" value="设置表格的宽度" onclick="addwidth();"/>
<input type="button" value="设置表格的隔行变色" onclick="addtrbgcolor();"/>
<input type="button" value="设置表格的背景色" onclick="addbgcolor();"/>
<table id="mainTable" >
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
</table>
</body>
</html>
4. element.style.property = new style 得到/设置html元素对应CSS样式的属性值。
html元素的属性值----出现在html开始标记中的属性设置
CSS样式的属性值----给html设置的css样式中的属性。
<img />
html元素的属性值--src
css样式中的属属性值--src[错误]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
<style>
#div{
width:200px;
height:200px;
background-color: black;
}
</style>
-->
<script>
function testStyleAttr(){
var divObject=document.getElementById("div");
var wid=divObject.style.width;
var hei=divObject.style.height;
var mycolor=divObject.style.backgroundColor;
alert(wid+","+hei+","+mycolor);
divObject.style.width="400px";
divObject.style.height="400px";
divObject.style.backgroundColor="red";
}
</script>
</head>
<body>
<input type="button" value="测试修改样式属性" onclick="testStyleAttr();" />
<div id="div"
style="width:200px;height:200px;background-color: black;">
</div>
<!--
<div id="div"></div>
-->
</body>
</html>
添加和删除元素
document.createElement(element)----------------创建HTML元素
document.removeChild(element)---------------删除HTML元素
document.appendChild(element)---------------添加HTML元素
document.replaceChild(element)--------------替换HTML元素
document.write(text)--------------------写入HTML输出流
createTextNode（text）---------------创建文本元素
添加和删除节点（HTML元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
function testElement(){
var pobj=document.createElement("p");
alert(pobj);
}
*/
window.onload=function(){
document.getElementById("but").onclick=function(){
/*
//createElement(element)创建 HTML 元素
var pobj=document.createElement("p");
//createTextNode(text)创建文本元素
var node=document.createTextNode("测试添加p元素的文本值");
//将文本元素添加到HTML 元素中
pobj.appendChild(node);
//根据id得到div对象
var divobj = document.getElementById("div1");
divobj.appendChild(pobj);
*/
/*错误
var pobj=document.createElement("<p>测试添加p元素的文本值</p>");
//根据id得到div对象
var divobj = document.getElementById("div1");
divobj.appendChild(pobj);
*/
/*
//document.removeChild(element) 删除 HTML 元素
var p1 = document.getElementById("p1");
var divobj = document.getElementById("div1");
divobj.removeChild(p1);
*/
/*
//document.replaceChild(新元素，旧元素) 替换 HTML 元素
var pobj=document.createElement("p");
var node=document.createTextNode("测试添加p元素的文本值");
pobj.appendChild(node);
var p1 = document.getElementById("p1");
var divobj = document.getElementById("div1");
divobj.replaceChild(pobj,p1);
*/
document.write("<h1>测试写出一个html元素</h1>")
};
}
</script>
</head>
<body >
<!--<input type="button" value="测试元素的添加" onclick="testElement();"/><br>-->
<input id="but" type="button" value="测试元素的添加"/><br>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
</body>
</html>
添加事件处理程序
document.getElementByid(id).οnclick=function(){code}------------向onclick事件添加事件处理程序
window.onload=function(){
document.getElementById("but").onclick=function(){
alert("按钮的点击事件");
};
}
上一篇： mysql大批量插入数据命令