黑马程序员_PHP_课程同步笔记day11:DOM介绍

黑马程序员_PHP_课程同步笔记day11:DOM介绍
黑马程序员_PHP_课程同步笔记day11:DOM介绍

【济南中心】PHP课程同步笔记day11:DOM介绍DOM(文本对象模型(Document Object Model))

W3C组织推荐的处理可扩展标志语言的标准编程接口。W3C的DOM,可以使程序或脚本(JS或AS、JScript),动态的访问或操作文档的内容、结构、样式。

DOM只是一个标准,就是操作网页的标准。而这个标准(模型)在浏览器中,以“对象”的方式实现。

DOM的分类

核心DOM:提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。

HTMLDOM:针对HTML文档,提供的专有的属性和方法。

EventDOM:事件DOM,提供了很多的常用事件。

CSSDOM:提供了操作CSS的一个接口。

HTML节点树

DOM中节点的类型:

document文档节点:代表整个网页,document文档节点不对应标记。是访问文档

中各元素的起点。

element元素节点:元素节点对应于网页中的各标记。

attribute属性节点:每个元素都有若干个属性。

Text文本节点:文本节点是最底层节点。

核心DOM公共属性和方法

nodeName:节点名称。

nodeValue:节点的值。

firstChild:第一个子节点。

lastChild:最后一个子节点。

parentNode:父节点。

childNodes:子节点列表,是一个数组。

节点访问

查找html节点的方法

document.firstChild

document.documentElement(兼容性较好)

查找body节点的方法

https://www.360docs.net/doc/878500280.html,stChild

document.body(推荐使用)

节点属性

1、getAttribute()——获取属性的值

描述:获取节点属性的值。

语法:nodeObj.getAttribute(name)

参数:name代表当前节点的某个属性。

举例:var src = imgObj.getAttribute(“src”)

2、setAttribute()——添加属性

描述:给某个节点添加属性。

语法:nodeObj.setAttribute(name,value)

参数:

name代表属性名称。

value代表属性的值。

举例:imgObj.setAttribute(“src”, “images/02.jpg”)

3、removeAttribute()——删除属性

描述:删除某个节点的属性。

语法:nodeObj.removeAttribute(name)

举例:imgObj.removeAttribute(“src”)

案例:

new document

节点操作

createElement()创建节点

语法:var nodeObj = document.createElement(tagName)

appendChild()追加节点

语法:parentNode.appendChild(childNode)

HTMLDOM简介和新特性

核心DOM中,对节点的访问,都是从根节点开始的,访问方式十分麻烦。特别是当节点层次很深时,更是麻烦。因此,才有了HTMLDOM。

1、HTMLDOM的新特性

每一个HTML标记,都对应一个对象。如:标记,就是一个img对象。

每一个HTML标记的属性,与对应的元素对象的属性,一一对应。

属性:src、width、height、border、style、title、id、class等。

在JS中,img对象属性:src、width、height、border、style、title、id、className 等。

代码:

"https://www.360docs.net/doc/878500280.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

new document

2、HTML DOM访问HTML元素的方法

(1)根据元素的id查找对象——document.getElementById(id)

new document

(2)根据HTML标签名找对象

描述:根据HTML标签名找对象

语法:var arr = parentNode.getElementsByT agName(tagName)

参数:

tagName就是要查找的标签名称,不能带尖括号。

parentNode代表上层节点。

返回值:返回一个对象数组。

举例:ulObj.getElementsByTagName(“li”)

new document

  • HTML超文本标注语言
  • CSS层叠样式表
  • JavaScript客户端脚本程序

元素对象的属性

tagName:与nodeName功能一样。

className:与class属性功能一样。

innerHTML:设置或读取某个标记中的所有内容,包括HTML文本。只能用于双边标记。

nodeValue:指纯文本。

offsetWidth:指元素的可见宽度,不含滚动条中的内容。只读属性。不带px单位。 offsetHeight:指元素的可见高度,不含滚动条中的内容。只读属性。不带px单位。 scrollWidth:指元素的总宽度,包含滚动条中的内容。只读属性。不带px单位。

scrollHeight:指元素的总高度,包含滚动条中的内容。只读属性。不带px单位。 scrollTop:当元素出现滚动条时,向下拖动滚动条,内容向上滚动的距离。可读可写属性。不带px单位。

如果该元素没有滚动条,则scrollTop的值为0,该值只能是正值。 scrollLeft:与scrollTop描述一样,只是向左滚动的距离。

事件:onscroll

描述:当拖动滚动条时发生

案例:

代码实现:

相关主题
相关文档
最新文档