DOM基础----DOM(一)

DOM(Document Object Model),中文名称为文档对象模型。是处理可扩展标识语言的标准编程接口,主要针对HTML和XML。DOM描绘了一个层次化的节点树,开发者能够加入、改动和移除页面的某一部分,也就说改变文编的内容和呈现方式。

D(Document):能够理解为整个Web载入的网页文档。

O(Object):对象。能够调用属性和方法。

M(Model):能够理解为网页文档的树型结构。一个节点有分支。

先对DOM有一个简单的介绍,在从基础来学习一下DOM,DOM有自己的节点和元素。

DOM的树型就是由节点组成的,W3C提供了比較方便的定位节点的方法和属性,这样我们就能够对节点进行操作,找到所须要的值。

查找元素节点的方法:

getElementById() :获取特定ID元素的节点

getElementsByTagName():获取同样元素的节点列表

getElementsByName():获取同样名称的节点列表

getAttribute():获取特定元素节点属性的值

setAttribute():设置特点元素节点属性的值

removeAttribute():移除特定元素节点属性

查找元素节点的方法有非常多。我就以getElementById()为例。来说明一下获取元素节点的方法:

window.onload=function (){

varbox =document.getElementById(‘box‘);

alert(box);

};

显示效果:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

节点:

节点(node):了解什么是节点(JavaScript节点)相当于树分叉的地方,通过以下的图我们就能非常清晰的了解节点。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

节点分这么多种,我们怎样来划分元素节点、属性节点、文本节点呢?这是一个小样例,能说明各个的差别:

 <HTML>
<HEAD>
<TITLE>生活</TITLE>
</HEAD>
<BODY>
    <table>
        <tr>
            <td id="john" name="myname">John</td>
            <td>Doe</td>
            <td id="jack">Jack</td>
        </tr>
    </table>
    <script>
        var d = document.getElementById("john");
        alert(d.nodeType)
        alert(d.nodeName)
        alert(d.nodeValue)
    </script>
</BODY>
</HTML>

输出结果:其三个属性的值分别为:

nodeType:ELEMENT_NODE

nodType值:1

nodeName(元素标记 ):td

nodeValue:null

经过这个过程,对于DOM有一个初步的了解,DOM的发展,基本组成,以及元素、节点的属性。在当中有大量是讲的方法。元素方法、节点操作方法,这些方法的学习为以后做基础,期待有更一步的提高。

时间: 2024-11-05 20:40:42

DOM基础----DOM(一)的相关文章

Javascript DOM 基础篇 01

DOM基础 DOM是什么 答:文件对象模型(Document Object Model,简称DOM),DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构!来自网络 本节了解了下面知识点: DOM节点 childNodes  nodeType 获取子节点 children parentNode 例子:点击链接,隐藏整个li offsetParent 例子:获取元素在页面上的实际位置 DOM节点(2) 首尾子节点 有兼容性问题 firstChild.firstElementChil

【JS学习笔记】DOM基础-字节点,父节点

一.DOM基础 (1)什么是DOM?DOM,即document,是用来操作页面上的元素,比如操作div获取,修改样式等.是JS的组成部分,还是一套规范. (2)浏览器的支持情况 现在主流的浏览器有3种,分别是IE,Chrome,Firefox. IE:在IE6-8版本中,对DOM的支持差不多是百分之十几差不多了,但是到了IE9就有了质的飞跃. Chrome:介于两者之间,在60%左右,对DOM支持的不是那么的好也不是那么的差. Firefox:对于DOM的支持几乎可以用99%来形容. 二.DOM

ajax——dom基础

javascript中dom实现可以使我们在ajax中通过javascript代码对html和xml数据进行dom方式操作,从而做到页面的动态修改更新和数据的提取处理. dom概念 dom文档对象模型,允许程序和脚本动态访问和更新文档的内容,结构和风格. dom对象树 在浏览器中一个页面对应一个html文档,因此有一个与之对应的html的dom树. 例如: 在浏览器中一个页面可能处理多个xml文档,因此可能有多个xml的dom树. dom对象树中常用的节点 在dom树中,文档内容中对应了很多不同

DOM基础(二)

在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE老版本,也是IE8之前的版本,包括IE8是不支持textContent的,只支持innerText.那要如何解决这个问题呢,我们总不能规定用户兼容我们写的代码的浏览器吧.毕竟顾客是上帝这句话是不变的真理,同样的,对于互联网来说,用户就是上帝.其实做为一个前端开发者来说,痛恨的不是顾客为什么不用好的浏

基础DOM和CSS操作

DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery中,已经将最常用的DOM操作方法进行了有效封装,并且不需要考虑浏览器的兼容性. D表示的是页面文档Document.O表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. DOM有三种形式,标准DOM.HTML DOM.CSS DOM(难道不是XML DOM吗?),大部

JavaScript基础—dom,事件

Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让javascript能操作html页面控件的类,函数. 这就是文档对象模型.按照xml文档的理解就可以. à页面中的属性,标签要是没有注明给那个对象,则统一时给window的,我们都可以通过window点击出来,进行操作,这个js中理解的一样.但是我们现在通过document.getElementById

获取元素节点(DOM基础 )

一.DOM 简介:以一种独立于平台和语言的方式访问和修改(添加.移动.改变或移除的方法和属性)一个文档(主要是网页)的内容和结构.是表示和处理一个HTML或XML文档的常用方法. 节点的定义:D(Web网页文档)O(document对象)M(网页文档的树形结构)M中树形结构可以理解为由节点组成.把每个标签看作一个节点.   节点的分类:以一个完成的标签为例<div id ="box">测试Div</div> 元素节点:是标签<div></div

DOM基础

1.几个概念 文档: html 页面 文档对象: 页面中的元素 文档对象模型: 定义API,为了让 js 去操作页面中的元素 DOM 会把文档看成一棵树,同时会定义很多 "方法" 和 "属性" 来操作这棵树的每一个节点 元素.childNodes a.只读属性,子节点列表 b.dom节点有12种 1 // NodeType 2 const unsigned short ELEMENT_NODE = 1; 3 const unsigned short ATTRIBUT

jQuery基础DOM

基础DOM由D,document文档页面:O表示对象 ,就是一组含有独立特性的数据结合,M表示模型,就是在页面上的元素节点与文本节点. html()与text()方法 方法名 描述 html() 获取元素中HTML内容 html(value) 设置元素中HTML内容 text() 获取元素中文本内容 text(value) 设置原生中HTML内容 val() 获取表单中的文本内容 val(value) 设置表单中的文本内容 如果设置多个选项的选定状态,比如下拉列表,单选复选框等,可以用数组传递操