【JavaScript】DOM之Document对象
JS(JavaScript)
一.Document对象
1.Document对象是什么
- Document对象
是DOM的基本规范也是重要的对象之一，以访问，更新页面内容的属性和方法
通过conslie。log()方法来Document对象打印，测试该对象的属性和方法
<body>
<script>
/*
document对象
* DOM预定义 - 已经被创建完毕了 - 允许直接使用
* 得到的是HTML页面的源代码 - 该对象代表当前HTML页面
*/
console.log(document);
// document的确是一个JavaScript对象
console.log(document instanceof Object);// true
// document对象的属性和方法被定义在原型上
console.log(Document.prototype);
// 不再需要我们创建了
var document = new Document();
console.log(document);
</script>
</body>- 继承链关系
<body>
<script>
// document对象是继承于Node的
console.log(Document.prototype instanceof Node);
// node对象是继承于EventTarget的
console.log(Node.prototype instanceof EventTarget);
console.log(Document.prototype instanceof EventTarget);
// DOM中的对象之间的继承关系远比语法中的继承关系复杂
console.log(Document.prototype instanceof HTMLDocument);
</script>
</body>2.定位页面元素
- getElementById()方法
该属性特点是唯一不可重复
<body>
<button id="ben">按钮</button>
<div id="q1"></div>
<script>
var buttonElement = document.getElementById('btn');
// 通过Document对象getElementById()方法定义元素
console.log(buttonElement instanceof Object);//true
/*
* 打印测试结果-对应元素HTML代码
* DOM是使用还是地道都应该是对象
*/
console.log(buttonElement instanceof HTMLButtonElement);
/*
* DOM提供一系列对象-对应HTML页面每个元素
* <button>元素都具有HTMLButtonElement对象
* <div>元素都具有HTMLDivElement对象
*/
var q1 = document.getElementById('q1');
console.log(q1 instanceof HTMLDivElement);//true
</script>
</body>- getElementsByName()方法
name是参数表示定位元素name属性值
name属性不唯一 - 得到结果可能是一个或多个
<body>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<script>
var buttonElements = document.getElementsByName('btns');
// name属性不唯一 - 得到结果可能是一个或多个
console.log(buttonElements[0]);
console.log(buttonElements instanceof NodeList);//true
/*NodeList集合-类数组对象
* 得到每个对应元素，通过索引值
*/
</script>
</body>- 节点集合NodeList
<body>
<button class="btns" id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
var btnElements = document.getElementsByClassName('btns');
console.log(btnElements);//HTMLCollection
/* console.log(btnElements.length);//5
// 打印当前集合长度
var btn = document.getElementById('btn');
// 删除当前集合中某个元素
var body = document.body;
body.removeChild(btn);
console.log(btnElements.length);//4
// 再一次打印当前集合长度
*/
var buttonElements = document.querySelectorAll('.btns');
console.log(buttonElements);//NodeList
console.log(buttonElements.length);//5
// 打印当前集合长度
var btn = document.getElementById('btn');
// 删除当前集合中某个元素
var body = document.body;
body.removeChild(btn);
console.log(buttonElements.length);//5
// 再一次打印当前集合长度
</script>
</body>- getElementsByTagName()方法
name是参数，表示定位元素的元素名
elements是返回值
<body>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<script>
var buttonElements = document.getElementsByTagName('button');
// HTMLCollection集合-类数组对象
console.log(buttonElements[0]);
</script>
</body>- 定位元素元素属性
<body>
<button class="btns" id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
console.log(document.documentElement);
// 获取到根元素(HTML)
console.log(document.head);
// 获取到头部(head)
console.log(document.body);
// 获取到文件内容(boby)
console.log(document.images);
// 获取到页面所有的图片(images)
</script>
</body>- getElementsByClassName()方法
names是参数，表示定位元素的class属性值
names参数是可以是一个样式属性名称或多个样式属性名称
<body>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
var buttonElement = document.getElementsByClassName('btns');
// HTMLCollection集合-类数组对象
console.log(buttonElements);
</script>
</body>- querySelector()方法
是通过CSS选择器定位第一个匹配元素
selectors是参数表示选择器以多个逗号分隔，并包含一个或多个CSS选择器
element是返回值
<body>
<button id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
var buttonElement1 = document.querySelector('#btn');
console.log(buttonElement1);
// 方法返回是第个匹配元素
var buttonElement2 = document.querySelector('.btns');
console.log(buttonElement2);
var buttonElements = document.querySelectorAll('.btns');
console.log(buttonElements);
// querySelectorAll()方法返回的是NodeList集合
</script>
</body>3.创建页面元素
- 创建元素节点
tagName是参数，表示创建元素节点
element是返回值
<body>
<script>
var btn = document.createElement('button');
// 创建<button>元素
var body = document.body;
// 获取<body>元素
body.appendChild(btn);
// 向<body>元素增加子节点
</script>
</body>- 创建文本节点
data是参数，表示文本节点的内容(字符串)
textNode是返回值
<body>
<script>
var btn = document.createElement('button');
// 创建<button>元素
var textNode = document.createTextNode('按钮');
// 创建文本节点
btn.appendChild(textNode);
// 向<button>元素增填子节点
var body = document.body;
// 获取<body>元素
body.appendChild(btn);
// 向<body>元素增添字节点
</script>
</body>- 创建属性节点
name是参数是指属性节点的名称
attributeNode是返回值
<body>
<script>
// 1.创建<button></button>元素
var btn = document.createElement('button');
// 2.创建文本节点
var textNode = document.createTextNode('按钮');
// 3.向<button>元素添加子节点
btn.appendChild(textNode);
// 4.创建属性节点
var attrNode = document.createAttribute('id');
// 5.为属性节点设置值
attrNode.nodeValue = 'btn';
// 6.为<button>元素设置属性节点
btn.setAttributeNode(attrNode);
// 4.获取<body>元素
var body = document.body;
// 5.向<body>元素添加子节点
body.appendChild(btn);
</script>
</body>【JavaScript】DOM之Document对象的更多相关文章
- 使用 JavaScript 中的 document 对象查找 HTML 元素，实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时，按钮高亮显示；
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...
- 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...
- javascript之DOM(二Document对象)
javascript通过Document类型来表示文档.在浏览器中document是HTMLDocument对象(继承自Document)的一个实例,表示整个html页面.而且在浏览器中documen ...
- 【温故而知新-Javascript】使用 Document 对象
Document 对象时通往DOM功能的入口,它向你提供了当前文档的信息,以及一组可供探索.导航.搜索或操作结构与内容的功能. 我们通过全局变量document访问Document对象,它是浏览器为我 ...
- HTML DOM部分---document对象；
<style type="text/css"> #d3{ color:red} </style> </head> <body> &l ...
- JavaScript基础知识----document对象
对象属性document.title //设置文档标题等价于HTML的<title>标签document.bgColor //设 ...
- DOM中document对象的常用属性方法
每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.anchors 返 ...
- js基础之DOM中document对象的常用属性方法
-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.an ...
- HTML DOM 实例-Document 对象
使用 document.write() 向输出流写文本 <html><body><script type="text/javascript">d ...
随机推荐
- android打飞机游戏、MVP句子迷App、悬浮窗、RxJava+Retrofit、加载动画、定制计划App等源码
Android精选源码 微信打飞机 android进度设置加载效果源码 Android新手引导库EasyGuide MVP-好看又好用的句子迷客户端 XFloatView 一个简易的悬浮窗实现方案 a ...
- 一、Shell脚本高级编程实战第一部
Shell脚本语言是实现linux系统自动化管理的重要且必要的工具,几乎每一个合格的linux系统管理员或者高级运维工程师都要熟练shell脚本语言的编写,只有这样才能提升工作效率,解决工作中的重复劳 ...
- 分布式锁 -- Java常用技术方案
来自博客园http://www.cnblogs.com/PurpleDream/p/5559352.html , 前言: 由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分 ...
- github傻瓜的食用方法
配置Git 首先在本地创建ssh key: 1 $ ssh-keygen -t rsa -C "your_email@youremail.com" 后面的your_email@yo ...
- 用户增删改查 django生命周期 数据库操作
一 django生命周期 1 浏览器输入一个请求(get/post)2 响应到django程序中3 执行到url,url通过请求的地址匹配到不同的视图函数4 执行对应的视图函数,此过程可以查询数据库, ...
- mysql简介/安装以及破解密码等
1.什么是数据库: 数据库即存放数据的仓库,只不过这个仓库是在计算机存储设备上,而且数据是按一定的格式存放的 过去人们将数据存放在文件柜里,现在数据量庞大,已经不再适用 数据库是长期存放在计算机内.有 ...
- Android目录结构（详解）
Android目录结构(详解) 下面是HelloAndroid项目在eclipse中的目录层次结构: 由上图可以看出项目的根目录下共有九个文件(夹),下面就这九个文件(夹)进行详解: 1.1src文件 ...
- Excel中带字母的数字序列自增实现方法
示例: 在A1单元格输入以下公式,然后向下填充公式 =".mr"&ROW()&" {margin-right: "&ROW()& ...
- <SCOI2008>奖励关
emmm第一道期望dp+个状压 真有趣.. #include<cstdio> #include<iostream> #include<cstring> #inclu ...
- iOS(Swift)学习笔记之SnapKit+自定义UI组件
本文为原创文章,转载请标明出处 1. 通过CocoaPods安装SnapKit platform :ios, '10.0' target '<Your Target Name>' do u ...