首页 > 代码库 > 网站前端_JavaScript-DOM编程.0001.JavaScriptDom基础核心?

网站前端_JavaScript-DOM编程.0001.JavaScriptDom基础核心?

2024-08-15 09:31:20   211人阅读

DOM简介:

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

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


节点分类:

元素节点

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

属性节点

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

文本节点

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


获取节点:

方法名称方法说明
body返回body元素对象
getElementById(id)返回当前对象下指定id属性值对应的元素节点对象,
getElementsByTagName(name)返回当前对象下的name元素的对象数组,name可以是通配符*,将返回当前对象下的所有元素节点
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
// 获取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://xmdevops.blog.51cto.com/11144840/1858118

网站前端_JavaScript-DOM编程.0001.JavaScriptDom基础核心?


联系
我们