javascript的操作DOM的属性

最新推荐文章于 2024-06-01 00:00:00 发布
最新推荐文章于 2024-06-01 00:00:00 发布
阅读量987 收藏 1
点赞数
文章标签： javascript js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53587164/article/details/124169781
版权

DOM

JavaScript分三个部分

ECMAScript标准: JS 的基本语法

DOM: Document Object Model ---> 文档对象模型-----操作页面的元素
BOM: Browser object Model...--.浏览器对象模型-- 操作的是浏览器

DOM: 文档对象模型

*文档:把- -个htmL文件看成是- -个文档，由于万物皆对象，所以把这个文档看成是一个对象

* XML文件也可以看成是一个文档

*HTML：展显示信息，数据

*XML：重点在于存储

htmL文件看成是一 个文档，那么这个文档看成是一个对象，文档中的所有的标签都可以看成是一个对象

*页面中的每个标签，都是一个元素(element), 每个元素都可以看成是一个对象*标签可以嵌套，标签中有标签，元素中有元素

* htmL页面中都有一个 根标签-html--也叫根元素

*页面中的有一一个根元素(标签- -htmL),里面有很多的元素(有很多的标签，有很多的对象)

*元素:页面中的所有的标签都是元素，元素可以看成是对象

*节点:页面中所有的内容都是节点:标签,属性，文本

 

Dom分类

核心DOM :是提供了操作HTML和XML文档的各种属性，定义了 一些公共的属性和方法。

XML DOM :针对XML操作的接口,也是一些属性和方法。

HTML DOM :针对HTML文档操作的接口,也是一些属性和方法。

Event DOM :事件对象模型，提供了 一些常用的事件。比如: onclick、 onload、 onchange

CSS DOM :让]S去操作和访问CSS的各种属性。

Document对象:

title属性

操作当前文档的标题

function getTitleO{

alert(document. title);

}

function setTitleO{

document.title = "设置标题";

}

URL属性

返回当前文档的URL。

function geturl(){

alert(document. URL);

}

Write()方法 向文档写文本。HTML表达式或者javascript代码

Document.write(“维生素”);

  • DOM操作之节点操作

整个文档是一个文档节点(Document)

每个HTML标签是一个元素节点(Element)

1 document.write("我是一个兵<br/>");

三、DOM操作之节点操作

整个文档是一个文档节点(Document)

每个HTML标签是一个元素 节点(Element)

性。每一个HTML属性是一个属性节点Atribute是 指元素中所有的属性构成的节点列表，个标记有多个属

包含在HTML元素中的文本是文本节点(Text)是最底层的节点，它下面不能再有其它子节点。

一个HTML文档，只有一个根元素，就是<htm1>标记

父节点(parentNode):当前节点的上一级元素;

子节点(childNode):当前节点的下一-级元素:

兄弟节点:相邻的两个节点，同属于一个父节点。

如: <htm1>

<head>

<title>文档标题</title>

</head>

<body>

<h1>我的标题</h1>

1

a href-"http: //www. baidu. com">我的链接</a>

12

</body>

13

</html>

1、获取节点(dom对象的方法和属性)

获取节点(js方式获取DOM节点)获取html中的标签元素

10

<h1>我的标题</h1>

1

a href-="http://www. baidu . com"我的链接</a

12

</body>

1

</html>

1、获取节点(dom对象的方法和属性)

获取节点(is方式获取DOM节点)获取htmI中的标签元素定位到html元素

document.getElementByld);

返回单个DOM元素节点

document.getElementsByName();

返回多个元素根据name属性值

document.getElementsByTagName0;

返回多个元素根据标签名

document.querySelectorAll();

返回多个元素根据选择器(可以是基本选择器，还可以是其它选

择器)

注意:后面三个是返回节点数组,注意使用方法

<div id="box">he1lo NodeType !~</div>

2

<u1 id="nav">

3

first list

<1i id="testli" name="listlist">列表01</1i>

5

<1i id=" testlist">列表02</1i>

<1i>列表03</li>

<1i>列表04</1i>

best list

</u1>

//元素节点

var element1=document. getElementById("box");alert(element1);

var element2=document. querySelectorAll("#box")[0];alert(element2);

设置或获取节点的属性值

dom元素属性(只能是标准属性设置或获取标签的文本内容

dom元素.innerText

设置或获取标签的文本内容(识别标签)

dom元素.innerHTML

案例一:设置、查看src属性

1<img src=" img/logo.png" id="img"/>

2 <button οnclick="getAttr();">查看 属性</button>

function getAttr(){

最低0.47元/天 解锁文章
qq_53587164
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS批量给元素添加css样式或attr标签
深南大道
04-26 2991
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></...
JS中的事件、DOM操作
axbhealj的博客
03-10 957
JS中的事件、DOM操作、改变元素、添加标签、删除标签、省市联动
JavaScript的DOM属性
maid_04的博客
12-10 290
今天我想记录一下我对DOM属性的总结 首先，先来认识一下什么是JS的DOM DOM 全称 Document Object Model ，中文名是 文档对象模型 文档：我们的html页面 文档对象：页面中的元素 文档对象模型：为了能够让程序–js去操作页面中的元素而定义的标准，通过 DOM，可访问 HTML 文档的所有元素 接下来，就认识一下DOM的一些属性及一些对属
javascript DOM 属性详解：读取、修改、移除
最新发布
大剑师兰特的GIS世界
06-01 1876
在JavaScript中，DOM（Document Object Model，文档对象模型）属性操作允许你读取、修改或删除HTML元素的属性，从而动态地改变页面内容或样式。以下是关于DOM属性操作的详细说明、示例代码以及注意事项。
javascript中setAttribute()函数使用方法及兼容性
xiaohubeiplus的博客
11-29 4348
setAttribute()函数可以设置对象的属性，如果不存在此属性，则会创建此属性。 语法结构: el.setAttribute(name,value) 参数列表: 参数 描述 name 必需。规定要设置的属性名。 value 必需。规定要设置的属性值。 代码实例: window.onload=function(){ var
JavaScript--DOM--JavaScript--DOM里常用的一些方法和属性
norang的博客
06-08 494
DOM的原子是元素节点 （element node）。 文本节点 （text node）。 属性结点用来对元素做出更具体的描述。 <p title="a gentle reminder">Don't forget to buy this stuff.</p> 在DOM中，title=“a gentle reminder” 是一个属性节点 （attribute node）， 继承 （inheritance）是CSS技术中的一项强大功能。类似于DOM，CSS 也把文档的内容视为一棵节
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型...javascript DOM 操作可以在客户端动态地更改网页的内容和结构，但是在不同的浏览器中需要使用不同的方法和属性来实现。
JavaScript变量Dom对象的所有属性
10-15
在标题和描述中提到的“JavaScript变量Dom对象的所有属性”是指通过JavaScript获取和操作DOM元素时涉及到的各种属性。以下是一些重要的DOM对象属性： 1. **id** - 这个属性对应于HTML元素中的`id`属性，它是唯一...
JavaScript 节点操作 以及DOMDocument属性和方法
10-30
DOMDocument对象是这个模型的核心，它代表了整个文档，并提供了访问和操作文档中各个元素的方法和属性。 首先，DOMDocument对象的一些重要属性包括： 1. `Attributes`: 这个属性是一个只读的NamedNodeMap，存储了...
JavaScript DOM常用操作代码汇总
10-15
- 对于JavaScript来说，DOM提供了一系列API，使得JavaScript能够识别并操作HTML页面中的元素。 - HTML文档经过浏览器解析后形成DOM树，其中每个HTML元素、属性和文本都是一个DOM节点。 - 通过DOM，JavaScript可以...
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
js DOM操作自定义属性
RayShyy的博客
03-19 4225
自定义属性：在日常开发中，html的内置属性已经无法满足程序员的日常开发，所以需要我们自己定义属性，H5给我们新增了自定义属性，为了防止自定义属性和内置属性引起歧义，所以H5规定自定义属性以data-开头定义。 1. 获取元素的属性值 element.属性名 element.getAttribute(“属性名”) element.属性名 和 element.getAttribute(“属性名”) 的区别： element.属性名：获取的是内置属性(元素本身自带的属性)，不能获取自定义属性； elem.
js对象的getter和setter
个人博客
06-04 5432
js对象的getter和setter一、简介1. getter（1）具体定义（2）使用方式2. setter（1）具体定义（2）使用方式二、设置getter和setter1. 初始化时定义2. 通过对象的prototype中的相关方法设置（1）定义getter（2）定义setter3. 通过defineProperty()设置（1）Object.defineProperty()（2）definePropertys()三、小案例 一、简介 学过vue的对getter和setter听起来应该都比较熟悉，因为vu
JS中setter/getter理解
lu1234cy56789的博客
09-09 1229
JS中setter/getter理解JS对象属性数据属性Object.defineProperty()访问器属性getter/setter创建及删除gettersetter JS对象属性 JS中对象包括属性和方法，其中属性又可分为数据属性和访问器属性。数据属性一般用于存储数据数值；访问器属性不包含数据值，访问器属性多用于get/set操作。本文讨论的setter/getter就是JS对象访问器属性中的get/set操作。 数据属性 数据属性是用于存储数据数值的，因此数据属性具有一个数据值的位置，在这个位置可
JavaScript 中的属性描述符
一碗周
10-25 954
JavaScript 中的属性描述符 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。——苏轼 写在前面 JavaScript 提供了一个内部数据结构，用于描述对象的值，控制其行为，例如该属性是否可写、可读、可配置、是否可修改以及是否可枚举等。这个内部数据结构被称为属性描述符。 每个属性都有自己对应的属性描述符，保存该属性的元信息。 对象里目前存在的属性描述符有两种主要形式：数据描述符和存储描述符。 数据描述符 数据描述符是一个具有属性的值，该值是可写的，也可能是不可写的。数据描述符具有以下可选键值：
JS操作DOM元素属性和方法（转）
weirhp的专栏
03-16 217
JS操作DOM元素属性和方法 Dom元素基本操作方法API，先记录下，方便以后使用。 　　W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM...
[Javascript]：DOM概念、DOM操作元素、属性、文本节点详解
我只是个程序员。
09-19 2721
DOM全称是文档对象模型，是专门用于操作HTML/XML文档的API（应用程序接口）。DOM将文档看作一颗树，其中的每个成分都是对象，这些对象都看作是节点。可以将文档的一切都理解成节点对象。 DOM的组成部分介绍：文档、对象和模型 Document(文档)：当用浏览器打开一个页面文档时，这个文档就会被转成document对象，然后就可以调用了。后面会提到该对象的用法。 Object(对象)：DOM中的每个节点都是对象，通过对象的属性和方法就能够操作节点。 Model(模型)：DOM将整个文档
Python的hasattr() getattr() setattr() 函数使用方法详解
weixin_34277853的博客
07-28 263
hasattr(object, name)判断一个对象里面是否有name属性或者name方法，返回BOOL值，有name特性返回True， 否则返回False。需要注意的是name要用括号括起来 1 >>> class test(): 2 ... name="xiaohua" 3 ... def run(self): 4 ... ...
js的getter和setter的基础详解
m0_54386801的博客
08-17 3389
getter和setter **get**语法将对象属性绑定到查询该属性时将被调用的函数。 当尝试设置属性时，**set**语法将对象属性绑定到要调用的函数。 说白了就是：get就是：要查询的属性中有get的语法，就会调用它们绑定的函数。 例如： var obj ={ a:3, get b(){ return this.a*3 } } console.log(obj.b) //9 //这里使用get语法，给属性b绑定一个回调函数，这个函数只有在要访问对象里的这个属性时
JS操作元素方法
08-19
综上所述，本文详细介绍了JS操作元素方法以及DOM元素属性和方法的相关知识，包括对DOM的概念、使用JavaScript对DOM进行操作的方法和属性，以及W3C DOM和JavaScript的区别。这些知识对于理解和使用DOM以及JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值