3.3 系统内部对象 —— DOM节点对象

最新推荐文章于 2022-08-23 19:50:15 发布

SuperBetterMan

最新推荐文章于 2022-08-23 19:50:15 发布

阅读量437

点赞数

分类专栏：数据可视化与前端技术

本文链接：https://blog.csdn.net/SuperBetterMan/article/details/106762976

版权

数据可视化与前端技术专栏收录该内容

15 篇文章 1 订阅

订阅专栏

HTML DOM节点树
HTML DOM定义了访问和操作HTML文档的标准方法。DOM将HTML文档表达为树结构。具体示例如下：
在这里插入图片描述

<html>
    <head>
        <title>文档标题</title>   
    </head>
    <body>
        <a href=“#">我的链接</a>
        <h1>我的标题</h1>    
    </body>
</html>

DOM节点对象概述
DOM节点对象泛指标记对象、标记属性对象、标记内的子标记对象或标记内的文本子对象，通过标记对象可获取其属性、子标记或文本内容子对象

DOM节点对象的通用属性
标记、标记属性、标记内子标记对象或文本子对象等DOM节点对象都具有nodeType节点类型、nodeName节点名称和nodeValue节点值三个通用属性。
nodeType 节点类型，取值含义为:
1 标记节点(包括body) 2 属性节点
3 文本节点 8 注释节点
9 文档节点

nodeName 节点名称，不同类型对象的属性值含义不同
body节点对象的nodeName值为：#document 。
标记节点对象的nodeName值为：标记名(大写)，而且等价tagName属性。
属性节点对象的nodeName值为：属性名。
文本节点对象的nodeName值为：#text 。

nodeValue 节点值
标记节点对象(包括body)没有nodeValue属性，其值为null
属性节点对象的nodeValue值为属性值
文本节点对象的nodeValue值为所包含的文本字符串

注意：1) 文本区域标记（textarea）的文本节点应使用value属性，若用nodeValue属性很容易出错。2) 可以通过直接赋值为任意节点对象添加任意类型的属性

var a=getElementById("idValue");
a.propertyName="propertyValue";

标记对象的所属类

在html文档中每出现一个标记就相当于为JavaScript创建了一个相应的对象，这些对象对应的类名一般与标记名一致，但第一个字母必须大写。
如body、p、div标记分别为Body、P、Div类的对象
其他的标记：


Anchor	锚或超链接a对象的类名
Image	嵌入图像img对象的类名
TableRow	行标记tr对象的类名
TableCell	单元格标记td对象的类名
Input text	文本框
Input password	密码框
Input hidden	隐藏域
Input checkbox	选择框
Input radio	单选框
Input file	文件选择框
Input reset	重置按钮
Input submit	提交按钮
Input button	按钮对象的类名

使用JS代码创建新标记对象的方法：

用documen文档对象的createElement(“标记名”) 创建新标记对象
直接使用类名创建标记对象

创建后，可通过直接赋值或调用setAttribute()方法为标记对象添加设置各种属性或文本内容

标记对象的属性
一个标记的所有属性都是该标记对象的子对象，通过document获取标记对象后，可使用“对象名.属性名”或调用getAttribute()、setAttribute()方法获取或设置该对象的任意属性值。属性子对象也可通过自己的属性或方法操作自己的属性。

标记对象的标准属性：（6个）


id	id属性子对象
className	class属性子对象
style	CSS样式属性子对象
title	提示属性子对象
dir	书写方向属性子对象
lang	语言属性子对象

标记对象的方法
创建获取标记对象后可使用“对象名.方法([参数])”任意调用该对象具有的方法
标记对象的通用方法：


focus( )	当前标记获得焦点
blur( )	当前标记失去焦点—把焦点从当前元素上移开
setAttribute(“属性名”, “属性值”)	为当前标记添加属性或替换已有属性值，也可通过直接赋值添加任意属性：a.pName=“pValue”;
getAttribute(“属性名”)	获取当前标记指定属性的属性值
cloneNode(include)	返回当前标记的副本，即复制的当前节点

父标记操作子标记对象的方法：


getElementById(“id”)	获取标记内指定id的子元素对象
getElementsByName(“name”)	获取标记内name子元素对象数组
getElementsByTagName(“tagname”)	获取标记内标记名子元素集合
hasChildNodes()	判断当前标记内是否具有子节点，有返回true否则false
appendChild(子节点对象)	在当前标记内的尾部添加指定的子节点
insertBefore(新子节点对象, 插入位置原子节点对象)	在指定原子节点之前插入新子节点，返回新插入子节点对象
replaceChild(新子节点对象, 被替换子节点对象)	用新子节点替换原有子节点，返回被替换的子节点对象
removeChild(childNode)	删除标记内指定子节点及其子节点

某些标记对象的专有属性或方法
1、body标记的专有属性： offsetWidth / offsetHeight
2、head中link标记的专有属性：disabled
3、a超链接标记、head中base标记的专有属性：target
4、form表单标记的专有属性及方法：elements[ ]、reset()、submit()
5、form内所有表单元素的通用属性：form
6、单选、复选框、reset重置按钮、submit提交按钮、button按钮的专有方法：click( )
7、文本框、密码框、文本区、文件选择框的专有方法：select()
8、select下拉列表或滚动列表框的专有属性与方法：selectedIndex、options[]、
remove(index)、add(option, before)
9、table表格对象的专有属性与方法：rows[]、cells[]、tBodies[] / tFoot / tHead、
createCaption()、deleteCaption()、insertRow(index)、deleteRow(index)、
createTFoot() / deleteTFoot()、createTHead() / deleteTHead()
10、tr表格行对象的专有属性与方法：rowIndex、cells[]、deleteCell(index) 、
insertCell(index)

SuperBetterMan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.3 系统内部对象 —— DOM节点对象

HTML DOM节点树HTML DOM定义了访问和操作HTML文档的标准方法。DOM将HTML文档表达为树结构。具体示例如下：<html> <head> <title>文档标题</title> </head> <body> <a href=“#">我的链接</a> <h1>我的标题</h1>
复制链接

扫一扫

专栏目录