javascriptDom

来源：互联网发布：js手机号正则表达式编辑：程序博客网时间：2024/05/01 01:22

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

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";
}
}
}

阅读全文

0 0