js基础之DOM中元素对象的属性方法详解_org.w3c.dom.Node如何添加元素资源-CSDN文库

120 浏览量 2021-01-19 16:25:26 上传评论收藏 111KB PDF 举报

资源推荐

资源详情

资源评论

js基础之基础之DOM中元素对象的属性方法详解中元素对象的属性方法详解

在 HTML DOM （文档对象模型）中，每个部分都是节点。

节点是DOM结构中最基本的组成单元，每一个HTML标签都是DOM结构的节点。

文档是一个文档节点。

所有的HTML元素都是元素节点

所有 HTML 属性都是属性节点

文本插入到 HTML 元素是文本节点

注释是注释节点。

最基本的节点类型是Node类型，其他所有类型都继承自Node，DOM操作往往是js中开销最大的部分，因而NodeList导致的问题最多。要注意：NodeList是‘动态的’，

也就是说，每次访问NodeList对象，都会运行一次查询，虽然这样增加了开销，但可以保证我们新添加的节点都能在NodeList中访问的到。

所有的元素节点都有共用的属性和方法，让我们来详细看一看：所有的元素节点都有共用的属性和方法，让我们来详细看一看：

先来看较为常用的先来看较为常用的通用通用属性属性

1 element.id 设置或返回元素的 id。

2 element.innerHTML 设置或者返回元素的内容，可包含节点中的子标签以及内容

3 element.innerText 设置或者返回元素的内容，不包含节点中的子标签以及内容

4 element.className 设置或者返回元素的类名

5 element.nodeName 返回该节点的大写字母标签名

6 element.nodeType 返回该结点的节点类型，1表示元素节点 2表示属性节点……

7 element.nodeValue 返回该节点的value值，元素节点的该值为null

8 element.childNodes 返回元素的子节点的nodeslist对象，nodelist类似于数组，有length属性，可以使用方括号 [index] 访问指定索引的值(也可　　以使用

item(index)方法)。但nodelist并不是数组。

9 element.firstChild/element.lastChild 返回元素的第一个/最后一个子节点(包含注释节点和文本节点)

10 element.parentNode 返回该结点的父节点

11 element.previousSibling 返回与当前节点同级的上一个节点(包含注释节点和文本节点)

12 element.nextSibling 返回与当前节点同级的下一个节点(包含注释节点和文本节点)

13 element.chileElementCount : 返回子元素(不包括文本节点以及注释节点)的个数

14 element.firstElementChild /lastElementChild 返回第一个/最后一个子元素(不包括文本节点以及注释节点)

15 element.previousElementSibling/nextElementSibling 返回前一个/后一个兄弟元素(不包括文本节点以及注释节点)

16 element.clientHeight/clientWidth 返回内容的可视高度/宽度（不包括边框，边距或滚动条）

17 element.offsetHeight/offsetWidth /offsetLeft/offset/Top 返回元素的高度/宽度/相对于父元素的左偏移/右偏移(包括边框和填充,不包括边距)

18 element.style 设置或返回元素的样式属性,。示例：element.style.backgroundColor 注意，与CSS不同，style的属性要去掉横杠，第二个单词　　首字母要大写

19 element.tagName 返回元素的标签名(大写)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.form_style{

color: #5b5b5b;

font-size: large;

border: 5px solid rebeccapurple;

background-color: antiquewhite;

width: 440px;

height: 120px;

position: relative;

left: 20px;

top:20px;

margin:10px;

}

p {

color: #5b5b5b;

font-size: larger;

text-indent: 40px;

}

</style>

</head>

<body>

<form id='first_form' class="form_style" name="cangjingge" >

请选择功法：<br/>

<input type="radio" name="gongfa" value="jysg">九阳神功<br/>

<input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>

<input type="radio" name="gongfa" value="khbd">葵花宝典<br/>

<input type="radio" name="gongfa" value="xxdf">吸星大法<br/>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38661466

粉丝: 7
资源: 930

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip