JavaScript之 document对象学习笔记.

最新推荐文章于 2022-03-23 10:55:35 发布

最新推荐文章于 2022-03-23 10:55:35 发布 · 200 阅读

文章标签：

#JavaScript #Windows #HTML #脚本 #浏览器 #ViewUI

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了DOM(Document Object Model)的各种操作方法及其应用场景，包括如何通过JavaScript动态地创建、修改和删除HTML元素，以及如何利用DOM API实现对网页内容的高效管理。

Ø Windows对象与document对象关系图示

Ø 其中Document对象代表了网页中的文档

Ø Image对象代表了文档中的所有图片

Ø Link对象代表了文档中的所有超链接

Ø Frames是windows的一个实例，亦是一数组；而images,links,anchors则是隶属于document的对象实例。

Ø Location对象的属性search以及方法reload(),replace()均很重要。

Ø Document对象的属性:

通用属性
bgColor	获取或设置文档背景色
cookie	读写Cookie对象
domain	用于指定当前文档所属Internet域
fgColor	获取或设置文本的默认颜色
forms	获取当前文档中的表单
images	获取当前文档中的所有图像
lastModified	获取当前文档最后一次修改时间
links	代表当前文档中的所有超链接
title	获取或设置当前文档的标题
URL	代表当前文档的URL
referrer	返回链接到当前文档的HTML文档的URL

Ø Document对象的all属性返回值为包含文档中所有HTML标签的数组，对all[]数组中的元素的引用方法有以下三种：

² document.all[i]

² document.all[name]

² document.all.tags[tagName]

Ø Document对象提供了一些处理文档内容的方法

方法	说明
clear()	清除文档中的所有内容，不推荐使用
close()	关闭一个文档输出流，并显示文档流中的内容
open()	打开一个新文档
write()	在文档中输出数据
writeln()	在文档中输出数据
createElement(name)	创建元素
createTextNode(text)	创建文本元素
getElementById(id)	根据ID属性获取元素
getElementsByName(name)	根据name属性获取元素列表
getElementsByTagName(tagname)	根据HTML标签名称获取元素列表
appendChild(node)	在某个元素中追加子元素
removeChild(childreference)	删除某个元素的子节点
cloneNode(deepBoolean)	复制节点
replaceChild(newChild, oldChild)	替换节点
insertBefore(newElement, targetElement)	在某个节点之前插入一个新节点
click()	执行某个元素的onclick方法

Ø appendChild 方法可以向当前节点对象追加子节点，经常用于给页面动态的添加内容，例如：给div添加一个文本节点：

var newdiv=document.createElement("div")

var newtext=document.createTextNode("A new div")

newdiv.appendChild(newtext)

document.getElementById("test").appendChild(newdiv)

</script>

Ø removeChild 方法可以移除并返回当前节点的子节点，这个被移除的节点可以被插入到document树中其他地方

<div id="child">A child</div>

</div>

var cd=document.getElementById("child");

var rd=document.getElementById("f").removeChild(cd);

</script>

Ø ReplaceChild 方法可以把当前节点的一个子节点替换为另一个节点

</div>

var oldele=document.getElementById("innerspan");

var newele=document.createElement("p");

var text=document.createTextNode("I am a new Element");

newele.appendChild(text);

document.getElementById("adiv").replaceChild(newele, oldele);

</script>

Ø InsertBefore 方法可以向当前节点插入一个新节点

语法为：insertBefore(newElement,targetElement)

如果targetElement被设置为null，那新节点被当作最后一个子节点插入，否则那新节点应该被插入targetElement之前的最近位置

<body> <span id="love">熊掌我所欲也!</span> </body>

var love=document.getElementById("love")

var newspan=document.createElement("span")

var ref=document.body.insertBefore(newspan, love)

ref.innerHTML="鱼与";

</script>

Ø Click 方法用于执行元素的一次点击事件，可以用于通过脚本来触发onClick函数

function wow() {

alert("我好象没有点鼠标啊");

}

</script>

<div id="test" onclick=‘wow()’>我是一个可以被点击的层</div>

var div = document.getElementById("test");

div.click();

</script>

Ø 与元素相关的属性成员

childeNodes	返回某个元素的所有子节点对象
innerHTML	设置或获取某节点的Html文本
innerText	设置或获取某节点的Text文本
Style	返回一个元素的style对象的引用
firstChild	返回某个元素的第一个子节点
lastChild	返回某个元素的最后一个子节点
parentNode	返回某个元素的父节点的对象
nextSibling	返回某个元素的下一个兄弟节点的对象
previousSibling	返回某个元素的前一个兄弟节点的对象
nodeName	返回节点的HTML标记名称