js学习--DOM操作详解大全 前奏(认识DOM)

一 . 节点属性

DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树:

方法 说明
nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text。nodeName,是只读的。
nodeType 节点的类型,返回值:1,元素节点;2,属性节点;3,文本节点。nodeType 是只读的。
nodeValue 节点的值,返回一个字符串,指示这个节点的值。元素节点返回 null,属性节点返回属性值,文本节点返回文本。nodeValue 可读可写,这是对元素节点不能写。一般只用于设置文本节点的值。
childNodes 返回子节点数组。文本和属性节点的 childNodes 永远是 null。可以用 hasChildNodes 来判断是否有子节点。只读属性。
firstChild 返回第一个子节点。文本和属性节点没有子节点,会返回一个空数组。对于元素节点,若是没有子节点会返回 null。有一个等价式:firstChild = childNodes[0]。
lastChild 返回最后一个子节点。返回值同 firstChild,,三方待遇参考上面。有一个等价式:lastChide = childNodes[childNodes.length - 1]。
nextSibling 返回节点的下一个兄弟节点。如果没有下一个兄弟节点的话,返回 null。只读属性。
previousSibling 返回节点的上一个兄弟节点。同上。
parentNode 返回节点的父节点。document.parentNode 返回 null,其他的情况下都将返回一个元素节点,因为只有元素节点拥有子节点,出了 document 外任何节点都拥有父节点。只读属性。

二. 节点方法

还记得下面这些我们用过的方法么,他们都是 DOM 的方法:

方法 说明
write() 写入内容到文档
getElementById() 返回带有指定 ID 的元素
getElementsByTagName() 返回带有指定标签名的所有元素
getElementsByClassName() 返回包含指定类名的所有元素的一个列表
get/setAttribute(‘key‘, ‘value‘) 返回或设置属性节点。

这些方法的前面要加上 document 对象的哦~

还有一些其它的 DOM 操作控制的方法:

方法 说明
createElement(‘tagName‘) 创建节点。
createTextNode(‘text‘); 创建文本节点。
appendChild(o) 在父节点末尾附加子节点 ,其中 o 为节点对象。
createDocumentFragment() 创建文档片断。
removeChild(oP) 删除节点。
replaceChild(newOp, targetOp) 替换节点。
insertBefore(newOp, targetOp) 已有的子节点前插入一个新的子节点。
insertAfter(newOp, targetOp) 已有的子节点之后插入一个新的子节点。
get/setAttribute(‘key‘, ‘value‘) 设置或得到属性节点。
cloneNode(true/false) 复制节点。

这些方法的使用主体不只是 document,更多的是各个节点元素。

在文档对象模型(DOM)中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

属性 说明
nodeName 节点名称,相当于 tagName 属性节点返回属性名,文本节点返回 #text。nodeName,是只读的。
nodeType 节点的类型,返回值:1,元素节点;2,属性节点;3,文本节点。nodeType 是只读的。
nodeValue 节点的值,返回一个字符串,指示这个节点的值。元素节点返回 null,属性节点返回属性值,文本节点返回文本。nodeValue 可读可写,这是对元素节点不能写。一般只用于设置文本节点的值。

节点属性介绍:

一、nodeName 属性:节点的名称,是只读的。

1. 元素节点的 nodeName 与标签名相同

2. 属性节点的 nodeName 是属性的名称

3. 文本节点的 nodeName 永远是#text

4. 文档节点的 nodeName 永远是#document

二、nodeValue 属性:节点的值

1. 元素节点的 nodeValue 是 undefined 或 null

2. 文本节点的 nodeValue 是文本自身

3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性:节点的类型,是只读的。以下常用的几种结点类型:

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

我们有两种方法替换元素的内容,一个是 innerHTML,另一个是 innerText。

innerHTML 属性用于获取或替换元素的内容,比如 <div> 标签内的所有元素。

<div><a>文本内容</a></div>

innerText 属性用于获取或替换元素的文本内容,只有文本内容,没有其它 HTML 标签。

<div><a>文本内容</a></div>

使用语法:

1

Object.innerHTML

2

?

3

Object.innerText

参数说明: Object 是获取的元素对象,如通过document.getElementById("ID")获取的元素。

style 的使用语法:

Object.style.property = new style;

参数说明:

1. Object 是获取的元素对象,如通过document.getElementById("id")获取的元素。

2. property 为 css 样式属性,比如 color,width 等等,不做过多说明。

className 属性可以设置或返回元素的 class 属性。

使用语法:

Object.className = classname;

参数说明:

1. Object 是获取的元素对象,如通过document.getElementById("id")获取的元素。

2. className 为 元素的 class 属性。

时间: 2024-08-04 10:29:02

js学习--DOM操作详解大全 前奏(认识DOM)的相关文章

js学习--DOM操作详解大全二(window对象)

一.window - 计时器 1?setTimeout()可以用来在指定的时间之后单次调用函数.setTimeount(f,1000);//一秒后调用函数fclearTimeout();取消函数的执行 示例:用setTimeout函数在1秒后改变字体的大小为60px. <html> <head> <script> function invoke(f,start){ setTimeout(f,start); } function changeSize(){ //改变元素的

javascript dom 操作详解 js加强

js加强操作实现代码. 1 .文档里的每个节点都有属性 nodeName . nodeValue . nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读属性 nodeValue 1 元素节点 2 属性节点 3 文本节点 只读属性 nodeType 不能用于元素节点 返回 null 2 . getElementsByTagName 返回一个节点集合 3 . firstChild . lastChild 第一个元素节点,最后一个元素节点 4 . chi

JavaScript基础:DOM操作详解

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 事件 JS是以事件驱动为核心

Jqurey DOM 操作详解

一.获取 1.获取内容----.text()  .html()   .value() text() - 设置或返回所选元素的文本内容                         格式:$(选择器).text(); html() - 设置或返回所选元素的内容(包括 HTML 标记)    格式:$(选择器).html(); val() - 设置或返回表单字段的值                                   格式:$(选择器).val() 2.获取属性----------

笔记-[1]-DOM的节点操作详解.

DOM:文档对象模型 操作DOM基本就是操作DOM的元素节点. 节点的属性: 1:objElement.childNodes  :获取该元素对象的的节点集合,有length长度属性,在标准浏览器下使用,会辩认文本节点的节点,一般不用,有其他的更好的属性(children) 2:objElement.children :     获取该元素对象的的节点集合,有length长度属性,在ie8下和其他标准浏览器兼容,只获取元素节点. 3:obj.nodeType   :获取对象的节点类型,1为元素节点

Python3字典操作详解 Python3字典操作大全

1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 #Author:sking 4 #Python3字典操作详解 Python3字典操作大全 5 6 #字典是无序的(因为它没有下标),key必须是唯一的 7 #字典是可变的,可以修改和添加 8 #创建字典 9 info = {'haha':12,'heihei':13,'wowo':45} 10 #查找字典的值value 11 #方法1 12 print(info['heihei']) #13 此

dom对象详解--document对象(二)

   dom对象详解--style对象 style对象 style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的重点是style对象,styleSheets不是重点. style对象定义:Represents the current settings of all possible inline styles for agiven element,即表示当前元素的样式设置. 例,可拖动的窗口 <!DOCTYP

Python对Excel操作详解

  Python对Excel操作详解 文档摘要: 本文档主要介绍如何通过python对office excel进行读写操作,使用了xlrd.xlwt和xlutils模块.另外还演示了如何通过Tcl  tcom包对excel操作. 关键字: Python.Excel.xlrd.xlwt.xlutils.TCl.tcom     1 Python简介 Python是一种面向对象.直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定.它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务.

js中window对象详解以及页面跳转

js中window对象详解以及页面跳转 转自:http://www.makaidong.com/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%90%9C/39219.shtml 1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp" 3. window.top.location.replace("index.asp");