js 中的DOM

1。DOM的基本概念:DOM是文档对象模型,定义访问和处理HTML文档的标准方法。文档是指标签文档,对象是指文档中每个元素。DOM将HTML文档呈现带有元素,属性和文本                               的树结构。

先来看看下面的代码:

将HTML代码分解为DOM节点层次图;      

HTML文档可以说由节点构成的集合,DOM节点有:

1 元素节点:上图中<html><body><p><ul>等都是元素节点,即标签。

2 文本节点:向用户展示的内容,<li>.....<li>中的javascript,DOM,CSS等文本

3 属性节点:元素属性,如<a>标签的连接属性href=“http:www.imooc.com”

2.getElementByName()方法:返回带有指定名称的节点对象的集合。

语法:document.getElementByName(“name”)通过元素的name属性查询元素,找出来的事数组。

注意:1.因为文档中的name属性可能不唯一,所以genElementByName()方法返回的是元素的数组,而不是一个元素。

2.和数组类似也有length属性,可以和访问数组一样方法来访问,从0开始。

3.getElementByTagName()方法:返回带有指定标签名的节点对象的集合。返回元素的顺序是他们文档中的顺序

语法:document.getElementByTagName(tagname)通过标签名查询元素,找出来的是数组。

说明:1.Tagname是标签的名称,如p,a,img等标

2.和数组类似也有length属性,可以和访问数组一样方法来访问,从0开始。

4.getElementById()方法:返回带有指定id的节点对象。

语法:document.getElementById()根据id找,最多找一个。

5.getAttribute()方法:通过元素节点的属性名获取属性值

语法:getAttribute(name)     elementNode:获取到的元素节点    name:是想查询的元素节点的属性名

6.setAttribute()方法:增加一个指定名称和值得新属性或者把一个现有的属性设定为指定的值。

语法:elementNode.setAttribute(name,value)   name:要设置的属性名   value:要设置的属性名

注意:1 把指定的属性设置为指定的值,如果不存在具有指定名称的属性,该方法将创建一个新的属性。

2 类似于setAttribute,只能通过元素节点对象调用的函数。

7.removeAttribute()方法:移除一个属性.

语法:elementNode.removeAttribute(属性名)

8.节点属性:

DOM节点的三个重要属性:nodeName:节点名称   nodeValue:节点值   nodeType:节点的类型

nodeName:节点的名称; a.元素节点的nodeName与标签名相同  b.属性节点的nodeName是属性的名称   c.文本节点的nodeName永远是#text  d.文档节点的nodeName永                                     远是#document

nodeValue:节点的值;   a。元素节点的 nodeValue是undefined或null  b。文本节点的 nodeValue是文本自身    c.属性节点的 nodeValue是属性的值

nodeType:节点的类型    元素\1   属性\2    文本\3    注释\8   文档\9

9.插入节点appendChild():在指定节点的最后一个子节点列表之后添加一个新的子节点

语法:appendChild(newnode)            newnode:指定追加的节点

插入节点insertBefore():可在已有的子节点前插入一个新得子节点。

语法:insertBefore(newnode node )      newnode:要插入的新节点    node:指定在此节点前插入节点

10.删除节点removeChild():从子节点列表中删除某个节点,如果删除成功,此方法可返回被删除的节点,如失败,则返回null

语法:nodeobject.removeChild(node)    node :指定删除的节点。

11.替换元素的节点replaceChild():实现子节点的替换,返回被替换对象的引用

语法:node。replaceChild(newnode.oldnew)   newnode:用于替换oldnew的对象    oldnew :被newnode替换的对象

12.创建元素节点createElement():此方法返回一个Element对象。

语法:document.createElement(tagName)     tagname:字符串值,用来指明创建元素的类型。

13.日期时间的操作:var d=new date();当前时间

var d=new date(1999,3,2);定义一个时间,1999年4月2日,3要加1

d.getFullYear():取年份;  d.getMonth():取月份,取出来的少1;  d.getDate():取天   d.getHours():取小时   d.getMinutes():取分钟

d.getSeconds():取秒      d.getFullYear():设置年份,设置月份的时候加1

例子:时间日期的选择:

效果展示:

2.单选框切换选项:

效果展示:

时间: 2024-10-10 21:31:40

js 中的DOM的相关文章

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.)                <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button>                                2.HTML页面中直接使用JS:                <script type="text/javascript">        

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

js中的Dom事件模型以及表格方面等内容

1.实现评论页面的制作 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #outside{ width: 1000px; margin: 0 auto; border: 1px solid #E7EAEE; overflow: hidden; pad

JS中的DOM操作和事件

[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点: 可以使用getElement系列方法,取到元素节点. [查看元素节点] 1.getElementById:通过id取到唯一节点.如果ID重名,只能取到第一个. getElementsByName(): 通过name属性   getElementsByTagName(): 通过标签名   getElementsByClassName()

js中的dom节点以及offset,client,scroll家族

一.节点. 1.父节点:parentNode; 2.兄弟节点: (1).下一个兄弟节点:nextElementSibling(在Ie中用nextSibling); (2).上一个兄弟节点:previousElementSibling(在Ie中用 previousSibling); 3.子节点: (1).选中第一个子节点:firstElementChild(在Ie中用firstChild); (2).选中最后一个子节点:lastElementChild(在ie中用lastChild); (3).选

B.JS中的DOM

在JS中经常会用到DOM,document object modle,即文档对象模型.其实就是在我们打开一个网页之后会自动建立的一个模型.首先我们先实例一个网页: <html> <head> <meta charset="utf-8"> <title>bob's love</title> </head> <body> <p id="FirstParagraph">bob'

js中的DOM操作(一)——查看及设置节点

一.前言 DOM 是 W3C(World Wide Web Consortium)标准.同时也 定义了访问诸如 XML 和 HTML 文档的标准: DOM是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口. 在HTML和JavaScript的学习中,DOM操作可谓时重中之重.今天,小编就领着大家来看看DOM操作是个什么样子!! 二.DOM节点  DOM节点分为三大类:元素节点.属性节点.文本节点: 而我们心心念念想知道的DOM树就长酱紫!          

JS中的DOM— —节点以及操作

DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!! 一.DOM树的节点 1. DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图

Js中的dom

文档对象模型 html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改(在dom树当中 一切皆为节点对象) Dom的方法和属性 getElementById() 寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点.如果不存在这样的元素,它返回 null. Code:输出 <input type="text" name="username" value="天天学习,好好向上" i

JS中的DOM对象及JS对document对像的操作

DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:reload()刷新 history:方法:go() status:不常用 document:下面详细介绍 JS对document对像的操作 分两个: 找到对象.操作对象. 找到对象的方法:document.getElementById().document.getElementsByName(). do