JS之文档对象模型DOM

  • 时间:2018-06-06 01:55 作者:Java帮帮 来源:Java帮帮 阅读:126
  • 扫一扫,手机访问
摘要:JavaScript文档对象模型DOMHistory和Location用DOM 解析模型,将文档加载到 内存,形成一个树形结构 就是根节点,每个标签会成为一个元素节点、标签的属性成为属性节点,标签内部的文本内容成为文本节点注意:属性节点,它不属于DOM树形结构,不属于任何节点父节点,也不属于任何节

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

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

  • 全部评论(0)
最新发布的资讯信息
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
【系统环境|服务器应用】一个很多人都会答错的java基础题(2019-06-11 06:33)
【系统环境|服务器应用】深入了解枚举类型(2019-06-11 06:33)
手机二维码手机访问领取大礼包
返回顶部