JS之文档对象模型DOM

作者 : 开心源码 本文共1672个字,预计阅读时间需要5分钟 发布时间: 2022-05-11 共89人阅读

JavaScript文档对象模型DOM

JS之文档对象模型DOM

History和Location用

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

注意:属性节点,它不属于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关系图

JS之文档对象模型DOM

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

2.DOM编程开发

window.document 代表整个HTML文档

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

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

document.body 访问页面中 元素

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

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

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

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

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

其中NodeList能作为数组进行操作

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

AAA

BBB

CCC

DDD

②:取得node后

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

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

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

childNodes

firstChild

lastChild

nextSibling

parentNode

previousSibling

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

明天休息

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); 该方法能返回一个节点的克隆节点, 克隆节点包含原节点的属性和子元素

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

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JS之文档对象模型DOM

发表回复