您的位置：首页 > Web前端 > JavaScript

JavaScriptDom基础核心

2017-03-10 00:00 405 查看

DOM简介:

说明: DOM(Document Object Model)文档对象模型,当网页被加载到WEB浏览器时,DOM树就自动被创建.它代表被加载到浏览器窗口里的当前网页,通过DOM树可以快速定位DOM对象中的元素或节点.

注意: 如下内容并非专属于Js,而是DOM核心,也就是支持DOM的任何一种程序设计语言都可以使用它们,而且用途并不局限于处理网页,它们可以用来处理任何一种标记语言如XML文档

节点分类:

元素节点

说明: 文档内的标签元素都属于元素节点,没有被包含在其它元素里的唯一元素是<HTML>元素,它是我们节点数的根元素节点

属性节点

说明: 元素或多或少有一些属性,属性的作用是对元素做出更具体的描述,属性节点总是被放在起始标签里,所以属性节点总是被包含在元素节点中,并非所有的元素都包含着属性,但是所有的属性都被包含在元素里

文本节点

说明: 文本节点总是被包含在元素节点内部,但并非所有的元素节点都包含有文本节点

获取节点:

方法名称	方法说明
body	返回body元素对象
getElementById(id)	返回当前对象下指定id属性值对应的元素节点对象,
getElementsByTagName(name)	返回当前对象下的name元素的对象数组,name可以是通配符*,将返回当前对象下的所有元素节点

1
2
3
4
5

var

shopping = document.getElementById(

'purchases'

var

items = shopping.getElementsByTagName(

'*'

for

var

i=0; i<items.length; i++){

console.log(i +

'->'

+ items[i].innerText)

节点属性:

属性名称	属性说明
childNodes	表示给定元素节点下的所有子元素节点组成的数组(不包含本元素),包含元素节点,文本节点,属性节点
firstChild	返回给定元素下的第一个子元素节点,可能是元素节点,属性节点,文本节点
lastChild	返回给定元素下的最后个子元素节点,可能是元素节点,属性节点,文本节点
nodeType	返回给定元素节点类型,返回1表示元素节点,返回2表示属性节点,返回3表示文本节点
nodeName	返回节点大写名称
nodeValue	表示节点的值,元素节点为null,属性节点为属性值,文本节点为文本值
方法名称	方法说明
onclick	返回或设置鼠标点击处理事件
onmouseover	返回或设置鼠标悬停处理事件
onmouseleave	返回或设置鼠标离开处理事件
getAttribute(attr)	返回元素对象的属性attr对应的属性值,如果没有值则返回null
setAttribute(attr,value)	设置元素对象的属性attr对应的属性值为value

1
2
3
4
5
6
7
8
9
10
11
12

// 获取p元素对象数组

var

pArr = document.getElementsByTagName(

'p'

for

var

i=0; i<pArr.length; i++){

// 获取对应元素对象title属性值

var

title = pArr[i].getAttribute(

'title'

// 如果存在就替换元素对象title属性值

if

(title){

alert(title)

pArr[i].setAttribute(

'title'

'limanman: '

+title)

alert(pArr[i].getAttribute(

'title'

))

注意: 网上有时候会看到通过element.attr来获取或设置元素对象的属性,但是它并不是支持所有的元素,所以强烈推荐大家使用getAttribute(attr)和setAttribute(attr,value)代替它.

登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信，还有更多惊喜哦~

本文出自 “满满李 - 运维开发之路” 博客，请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1858118

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航