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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Zookeeper实现参数的集中式管理【面试+工作】

    应用项目中都会有一些参数,一般的做法通常可以选择将其存储在本地配置文件或者内存变量中;对于集群机器规模不大、配置变更不是特别频繁的情况下,这两种方式都能很好的解...

    奋斗蒙
  • Centos7下yum安装jdk、mysql、iptables、nginx、redis

    奋斗蒙
  • Redis实现参数的集中式管理【面试+工作】

    分布式缓存Redis也提供了类似的发布订阅功能,并且Redis本身提供了缓存和持久化的功能,本文将介绍通过Redis实现简单的参数集中式管理。

    奋斗蒙
  • 如何在Ubuntu 16.04上的三节点集群上部署CockroachDB

    CockroachDB是一个开源的分布式SQL数据库,提供一致性、可伸缩性和生存性。

    新巴子
  • 特斯拉一复工就爆确诊,马斯克有点烦暂停发推

    不知道是不是膨胀了,马斯克不顾当前美国只增不减的严峻疫情,强令工厂复工。他还口出狂言,称「停工隔离」是法西斯行为,坚决要求工厂复工,并放出狠话:「要抓,就来抓我...

    新智元
  • OC学习8——异常处理

    1、和Java一样,OC也有自己的一套异常处理机制,不同的是,OC中的异常处理机制并不是作为常规的编程实践,通常只是作为一种程序调试、排错机制。 2、与Java...

    mukekeheart
  • 【Vue原理】Diff - 白话版

    终于到了最后一块内容了!今天我们就来简单概括一下 Diff,内容一点都不多哦,全是图片

    神仙朱
  • xBIM 基础01 简介

      BIM(Building Information Modelling)建筑信息模型,xBIM(eXtensible Building Information...

    张传宁老师
  • 深入理解TCP/IP协议的实现之ip分片重组(基于linux1.2.13)

    我们都知道数据链路层有mtu的限制,如果我们上层发的包太大,那就要分片,那么对端就需要重组分片,组装好再通知上层。我们看一下分片重组的过程。我们看一下分片重组中...

    theanarkh
  • 使用 Jersey 调用 Restful 服务

    第 20 章 Jersey - RESTful Web Services in Java. 目录 20.1. Client 20.1.1. Maven 版本 ...

    netkiller old

扫码关注云+社区

领取腾讯云代金券