Web API-document

什么是document

是 DOM 里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
网页所有内容都在document里面

查找/获取DOM对象

 <script>let box=document.querySelector("css选择器");//选择第一个选择器let box1=document.querySelectorAll("css选择器");//选择相对应的所有选择器console.log(box)console.log(box1)//返回伪数组: 和数组一样的有索引值; 数组的操作方法伪数组不能用,想要得到里面的每一个对象，则需要遍历（for）的方式获得</script>

注意：

. querySelector() 方法能直接操作修改吗？
➢ 可以
querySelectorAll() 方法能直接修改吗？如果不能可以怎么做到修改？
➢ 不可以，只能通过遍历的方式一次给里面的元素做修改

其他获取DOM对象的方法

设置/修改DOM元素内容

有以下三种方法：

方法	特点
document.write()	只能将文本内容追加到 </body> 前面的位置,文本中包含的标签会被解析
对象.innerText 属性	将文本内容添加/更新到任意标签位置,文本中包含的标签不会被解析
对象.innerHTML 属性（常用，重点）	将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析

设置/修改DOM元素属性

设置/修改元素常用属性

 <script>let pic = document.querySelector('img')pic.src = './images/2.webp'//语法就是： 对象.属性='值'pic.title = '这是js添加的title属性值'</script>

设置/修改元素样式（css）属性

方法	语法
style	对象.style.样式名称=‘值’ `box.style.backgroundColor = 'green'`
className	元素.className=‘css类名’（容易覆盖以前的类名）`box.className += ' active'`
classList	元素.classList.add/remove/toggle(‘类名’) （不影响以前的类名）`box.classList.toggle('one')`

设置/修改表单样式（css）属性

获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值

<script>//  查找标签let inp1 = document.querySelector('input')console.log(inp1.value)//获取inp1.type = 'password'//设置// 按钮禁用启用let btn = document.querySelector('button')// btn.disabled = truebtn.disabled = false// 复选框 选中let agree = document.querySelector('.agree')// agree.checked = trueagree.checked = false</script>

Web API-document相关推荐

web API简介(二)：客户端储存之document.cookie API
概述前篇:web API简介(一):API,Ajax和Fetch 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据.document.cook ...
Web API 接口-JavaScript全部api接口文档
当使用JavaScript编写网页代码时,有很多API可以使用.以下是所有对象.类型等接口的列表,你在开发网页应用程序或站点时使用它们. API文档地址:https://developer.mozil ...
ASP.NET MVC4中调用WEB API的四个方法
当今的软件开发中,设计软件的服务并将其通过网络对外发布,让各种客户端去使用服务已经是十分普遍的做法.就.NET而言,目前提供了Remoting,WebService和WCF服务,这都能开发出功能十分强 ...
Asp.net core 学习笔记 ( Web Api )
更新 : 2019-06-03 web api 返回 json 的情况下默认会把属性 PascalCase 变成 camelCase 很贴心哦. 如果你不喜欢可以修改它 services.AddMv ...
Asp.Net Web API 2第一课——入门
前言 Http不仅仅服务于Web Pages.它也是一个创建展示服务和数据的API的强大平台.Http是简单的.灵活的.无处不在的.你能想象到几乎任何的平台都会有HTTP服务库.HTTP服务可以涉及到 ...
返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API
返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API 原文:返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 ...
1.1ASP.NET Web API 2入门
HTTP 不只是为了生成 web 页面.它也是建立公开服务和数据的 Api 的强大平台.HTTP 是简单的. 灵活的和无处不在.你能想到的几乎任何平台有 HTTP 库,因此,HTTP 服务可以达到范围 ...
Dynamics CRM中跨域调用Web API 2
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复224或者20160611可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
Web API 简单示例
一.RESTful和Web API Representational State Transfer (REST) is a software architecture style consisting ...
聊聊asp.net中Web Api的使用
扯淡随着app应用的崛起,后端服务开发的也越来越多,除了很多优秀的nodejs框架之外,微软当然也会在这个方面提供更便捷的开发方式.这是微软一贯的作风,如果从开发的便捷性来说的话微软是当之无愧的老大 ...

Web API-document

什么是document

查找/获取DOM对象

设置/修改DOM元素内容

设置/修改DOM元素属性

设置/修改元素常用属性

设置/修改元素样式（css）属性

设置/修改表单样式（css）属性

Web API-document相关推荐

最新文章

热门文章