博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Document对象中的一些重要的属性和方法(笔记)
阅读量:6279 次
发布时间:2019-06-22

本文共 1781 字,大约阅读时间需要 5 分钟。

Document对象:每一个web浏览器窗口、标签页和框架由一个window对象所表示。每个window对象都有一个document属性引用的是Document对象,它是一个巨大的API中的核心对象,叫做文档对象模型(Document Object Model, DOM),它代表和操作文档的内容。

 

getElementById()方法可以通过ID名获取元素:任何HTML元素可以有一个ID属性,在文档中该值必须唯一,即同一个文档中的两个元素不能有相同的ID。可以用Document对象的getElementById()方法选取一个基于唯一ID的元素

//得到ID为sec的HTML元素var sec = document.getElementById(‘sec’)

 

 getElementsByTagName()方法可以通过元素名来获取元素:Document对象的getElementsByTagName()方法用来选取指定类型(标签名)的所有HTML或XML元素。

//获取文档中所有span标签var eles = document.getElementsByTagName('span');//获取文档中所有span标签中第4个span标签var span4 = document.getElementsByTagName('span')[3];//获取文档中id为my的所有span标签子元素var idMy = document.getElementById('my');var mySpan = idMy.getElementsByTagName('span');

 

通过CSS选择器获取元素:querySelectorAll()方法它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器额所有元素的NodeList对象,需要注意,它返回的NodeList对象并不是实时的,它包含在调用时刻选择器所匹配的元素,但它并不更新后续文档的变化。如果没有匹配的元素,它将返回一个空的nodelist对象。如果选择器字符串非法,它将抛出一个异常。

//

This is a sample warning

//

This is a sample error

document.querySelectorAll(".warning"); //返回上面2个p标签

 

createElement()方法用于创建HTML元素:Document对象的createElement()方法可以创建新的元素,创建好的新元素还可以添加属性,并把它们插入到文档中

//HTML代码: //
我是谁
//创建Element节点,并且给节点添加各种属性var ele = document.getElementById('one');var newEle = document.createElement('span');var eleQQ = document.getElementById('qq');newEle.innerHTML = '新创建Element节点'ele.insertBefore(newEle, eleQQ); //新建的元素插入到id为qq的元素前面 ele.appendChild(newEle); //新建的元素插入到id为one的元素内部最后面

 

Document对象中的Cookie属性:允许JS程序读、写HTTP cookie的特殊的属性,它的值是一个字符串。

//查看当前页面Cookie值的情况document.cookie

 

Domain属性:该属性允许当web页面之间互交时,相同域名下互相信任的Web服务器之间协作放宽同源策略安全限制

 

lastModified属性:包含文档修改时间的字符串

 

location属性:与window对象的location属性引用同一个location对象

 

Title属性:文档的<title>标签之间的内容

 

URL属性:文档的URL,只读字符串而不是location对象,该属性值于location.href的初始值相同,只是不包含location对象的动态变化

转载于:https://www.cnblogs.com/zhuifeng/p/3785653.html

你可能感兴趣的文章
Web基础架构:负载均衡和LVS
查看>>
Linux下c/c++相对路径动态库的生成与使用
查看>>
SHELL实现跳板机,只允许用户执行少量允许的命令
查看>>
SpringBoot 整合Redis
查看>>
2014上半年大片早知道
查看>>
Android 6.0指纹识别App开发案例
查看>>
正文提取算法
查看>>
轻松学PHP
查看>>
Linux中的网络监控命令
查看>>
this的用法
查看>>
windows下安装redis
查看>>
CentOS7 yum 安装git
查看>>
启动日志中频繁出现以下信息
查看>>
httpd – 对Apache的DFOREGROUND感到困惑
查看>>
分布式锁的一点理解
查看>>
idea的maven项目,install下载重复下载本地库中已有的jar包,而且下载后jar包都是lastupdated问题...
查看>>
2019测试指南-web应用程序安全测试(二)指纹Web服务器
查看>>
树莓派3链接wifi
查看>>
js面向对象编程
查看>>
Ruby中类 模块 单例方法 总结
查看>>