javascriptDom
1. DOM定义
全称：document object model（文档对象模型），是W3C组织推荐的处理可扩展标志语言的标准编程接口
•document：指的是可扩展的标记语言：HTML、XML；
•object：DOM实际上是以基于对象方式对当前文档进行操作的；
•model：在网页上，组织页面（或文档）的对象被组织在一个树形结构中，这个就是文档模型。
2.Document对象集合
|
集合 |
描述 |
|
all[] |
提供对所有文档中html元素的访问 |
|
anchors[] |
返回对文档中所有anchor对象的引用 |
|
Applets |
返回对文档中所有applet对象的引用 |
|
forms[] |
返回对文档中所有form对象的引用 |
|
images[] |
返回对文档中所有image对象的引用 |
|
links[] |
返回对文档中所有area和link对象的引用 |
Document对象属性
|
属性 |
描述 |
|
body |
提供对<body>元素的直接访问 对于定义了框架集的文档，该属性引用了最外层的<frameset> |
|
cookie |
设置或返回与当前文档有关的所有cookie |
|
domain |
返回当前文档的域名 |
|
lastModified |
返回文档被最后修改的日期和时间 |
|
referrer |
返回载入当前文档的URL |
|
title |
返回当前文档的标题 |
|
URL |
返回当前文档的URL |
Document对象方法
|
方法 |
描述 |
|
close() |
关闭用document.open()打开的输出流，并显示选定的数据 |
|
getElementById() |
返回对指定id的第一个对象的引用 |
|
getElementsByName() |
根据标签name属性来获取指定元素对象集合 |
|
getElementsByTagName() |
根据标签名来获取指定元素对象集合 |
|
open() |
打开一个流，以收集来自任何document.write()方法的输出 |
|
write() |
向文档写HTML表达式或JavaScript代码 |
|
writeln() |
同write(),不同的是在每个表达式之后写一个换行符 |
3. 对获取的标签对象基本操作
•操作属性
对象.属性名
•操作内容
对象.innerText 说明：纯文本插入，包括标签
对象.innerHTML 说明：以HTML内容插入，解析标签内容
•操作样式
对象.style.属性名
说明：如果样式属性有“-”，则去掉“-”，改为符号后面单词首字母大写方式调用样式；通过增加和删除class选择类的方式实现样式操作
4.DOM模型
(1)DOM中model部分
•文档结构理解为一个倒树模型
•文档中每一个内容都是树中的一个节点（内容包括：元素、内容、属性、注释）
(2)DOM中节点遍历
•父节点（单数）：parentNode
•子节点：childNodes（复数）、firstChild（单数）、lastChild（单数）
•兄弟节点：nextSibling（上一个节点）、previousSibling(下一个节点)
(3)文档树中节点说明
•节点名称：nodeName
元素节点：标签名称；属性节点：属性名称；文本节点：#Text；
注释节点：#comment；文档节点：#document
•节点值：nodeValue
元素节点：不可用；属性节点：属性值；文本节点：文本内容；注释节点：注释内容； 文档节点：不可用
•节点类型：nodeType
元素节点：1 属性节点：2 文本节点：3
注释节点：8 文档节点：9
(4) 在文本流中节点操作（方法）
创建节点对象：document.createElement
追加子节点：对象.appendChild(插入的节点对象); 插到字节点的最后
删除子节点：对象.removeChild(删除的节点对象);
(5)文档树
js实现文件选择的添加删除
<a href="javascript:add()">添加</a>
<a href="javascript:remove()">删除</a><br />
<input type="file" /><br />
<input type="file" /><br />
<input type="file" /><br />
<script type="text/javascript">
//添加
var add = function(){
var obj = document.createElement("input");//创建一个输入框
var br = document.createElement("br");//创建一个换行
obj.type = "file";
obj.className = "file";
//获取body
var body = document.getElementsByTagName("body")[0];
body.appendChild(obj);
body.appendChild(br);
}
//删除
var remove = function(){
var inputs = document.getElementsByTagName("input");
var body = document.getElementsByTagName("body")[0];
body.removeChild(inputs[inputs.length-1]);//删除最后一个
}
</script>
测试结果
发现删除后再添加就会空出一个位置，并没有完全删除
js实现表格动态添加和删除
//添加
var add = function(){
//var tab = document.getElementById("tab1").insertRow(-1);//开头加一行
var tab = document.getElementById("tab1").insertRow(-1);//末尾加一行
var tr = document.getElementsByTagName("tr");
var num = tr.length-1;
var username = document.getElementById("username").value;
var age = document.getElementById("age").value;
var sex = document.getElementById("sex").value;
var jiguan = document.getElementById("location").value;
var td1 = tab.insertCell(0);
td1.innerHTML = num;
var td2 = tab.insertCell(1);
td2.innerHTML = username;
var td3 = tab.insertCell(2);
td3.innerHTML = age;
var td4 = tab.insertCell(3);
td4.innerHTML = sex;
var td5 = tab.insertCell(4);
td5.innerHTML = jiguan;
var td6 = tab.insertCell(5);
td6.innerHTML = "<a href='javascript:delRow(this)'>删除</a>";
}
//改变颜色
var changeColor = function(){
var trs = document.getElementsByTagName("tr");
for(var i = 1;i<trs.length;i++){
if(i%2 == 0){
trs[i].style.backgroundColor = "ghostwhite";
}else{
trs[i].style.backgroundColor = "pink";
}
}
}