JS之文档对象模型DOM

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<title>History和Location使用</title>

</head>

<body>

<input type="button" value="返回" onclick="history.back();" />

</body>

</html>

DOM 解析模型,将文档加载到 内存,形成一个树形结构 <html> 就是根节点,每个标签会成为一个元素节点、标签的属性成为属性节点,标签内部的文本内容成为文本节点

注意:属性节点,它不属于DOM树形结构,不属于任何节点父节点,也不属于任何节点的子节点 ,属性节点依附于元素节点上 一种附加节点

【上面代码 产生6个元素节点,5个属性节点,9个文本节点】

HTML 本身也是 XML,所有可以使用XML DOM API规范

DOM Element

DOM Attr

DOM Text

DOM Document

HTML DOM是对XML DOM的扩展, HTML DOM比XML DOM 开发JS来说更加简单方便!

HTML DOM最优秀的地方是,操作form对象和table数据

1.BOM和HTML DOM关系图

学习DOM 编程,从Document对象开始,document代表当前HTML网页文档对象,是window对象一个属性,可以直接使用 ,所有HTML DOM对象都是Document子对象

2.DOM编程开发

window.document 代表整个HTML文档

①:通过document获得Node节点对象

document.forms 获得页面中所有form元素集合

document.body 访问页面中<body> 元素

document.cookie 用JS操作网页cookie信息

全局检索提供了三个重要的方法:

document.getElementById():通过id属性检索,获得Node节点(Element元素)

document.getElementsByName 通过name 属性检索 ,获得NodeList

document.getElementsByTagName 通过标签元素名称 获得NodeList

其中NodeList可以作为数组进行操作

Demo:在每一个h1标签后追加itcast

<script type="text/javascript">

//在每一个h1标签内追加一个itcast

window.onload = function(){

varnodeList = document.getElementsByTagName("h1");

for(vari=0; i<nodeList.length;i++){

// varh1 = nodeList[i];

varh1 = nodeList.item(i);

alert(h1.innerHTML);

h1.innerHTML += "itcast";

}

}

</script>

<body>

<h1>AAA</h1>

<h1>BBB</h1>

<h1>CCC</h1>

<h1>DDD</h1>

</body>

②:获得node后

如果node是元素,去操作里面的文本内容 innerHTML (HTML页面内所有元素,一定是HTML 元素,innerHTML 是所有HTML元素通用属性 )

XML 取得一个元素内部文本内容 element.firstChild.nodeValue(看批注32)

③:通过节点Node相对位置关系访问元素

childNodes

firstChild

lastChild

nextSibling

parentNode

previousSibling

用2种方式打印——明天休息

<h1id="h1">明天休息</h1><br>

varh1 = document.getElementById("h1");

alert(h1.innerHTML);//方式一

alert(h1.firstChild.nodeValue);//方式二

3.DOM元素常见操作

DOM 获取节点:节点查询 参上

DOM 改变节点:元素属性修改setAttribute(name,value)

内部文本元素的修改 innerHTML

DOM 删除节点:removeChild 删除子元素 、removeAttribute(name)删除节点指定属性

* 要删除节点o o.parentNode.removeChild(o)

DOM 替换节点:replaceChild:父节点.replaceChild(新节点,被替换节点) ;

如果对于一个已经存在节点,执行 appendChild、 replaceChild都会造成该节点一个移动效果,可以采取先克隆再复制来消除此效果。

DOM 创建节点:document对象提供createElement() 创建元素、createAttribute(name) 创建属性、createTextNode() 创建文本节点

DOM 添加节点 appendChild 父元素.appendChild(新的子节点) ;

insertBefore 父节点.insertBefore(新子节点, 已经存在子节点)

DOM 克隆节点 源节点.cloneNode(true); 该方法可以返回一个节点的克隆节点, 克隆节点包含原节点的属性和子元素

此节内容有大量的练习,建议大家做写,增强代码的熟练度。

原文发布于微信公众号 - Java帮帮(javahelp)

原文发表时间:2017-03-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

2016.07 第一周 群问题分享

HTML+CSS 如何用CSS实现一个元素footer一直贴在浏览器底部 2016.06.27~2016.07.01 核心概念 margin-bottom负值、...

29410
来自专栏技术博文

jquery对象和dom对象的相互转换

1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jqu...

3734
来自专栏Golang语言社区

Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

36410
来自专栏前端知识分享

第138天:Web前端面试题总结(编程)

2、一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为...

1143
来自专栏finleyMa

解决setTimeout中的this指向问题

在setInterval和setTimeout中传入函数时,函数中的this会指向window对象。

3135
来自专栏Pythonista

Golang之指针(point)再探索

882
来自专栏gaoqin31

jQuery源码浅析

如果说php是世界上最好的语言,那么javascript无疑可以称为世界上最飘逸的语言,最近看了下jQuery的源码,实现了一个简陋的jQuery。我觉得要看懂...

2173
来自专栏Golang语言社区

go语言数组的拷贝

go语言的数组与c语言的数据有一点不太一样的地方,go语言的赋值是值拷贝 package main import "fmt" func main...

3889
来自专栏天天

childNodes属性和nodeType属性

1814
来自专栏一枝花算不算浪漫

[jQuery学习系列一]1-选择器与DOM对象

39011

扫码关注云+社区

领取腾讯云代金券