JS-DOM-节点-获取元素-文档结构-元素的属性
2024-05-16 23:19:14
JS-DOM-节点-获取元素-文档结构-元素的属性
1 回顾
1.1 内置构造函数 Function
Function 的实例的属性和方法：lengthcall()applay()bind()
1.2 BOM
1. windownamelengthinnerWidthinnerHeightalert()confirm()prompt()open()close()print()scrollTo()scrollBy()setInterval()clearInterval()setTimeout()clearTimeout()2. historylengthback()forward()go()3.locationhrefprotocolhostnameporthostpathnamesearchhashreload()assign()replace()4. navigatoruserAgent5. screenwidthheihgt2 DOM 介绍
**MDN 文档对象模型手册：**https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
1）DOM 英文全称“Document Object Model”，译为“文档对象模型”。
2）DOM 是一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。
3 Node 节点
3.1 五大节点类型
document 文档节点 nodeType:9
element 元素节点 nodeType:1 nodeName 获取元素的标签名
attribute 属性节点 nodeType:2
text 文本节点 nodeType:3
comment 注释节点 nodeType:8
3.2 节点的属性
nodeName 获取节点的名字
nodeValue 获取节点的值
nodeType 获取节点的类型，用数字表示
// document节点
console.log(document); //#docunment
console.log('节点名字：',document.nodeName); //#docunment
console.log('节点值：',document.nodeValue); //null
console.log('节点类型：',document.nodeType); //9// element元素节点
var ele = document.getElementById('box')
console.log(ele); //<div></div>
console.log('节点名字：',ele.nodeName); //DIV
console.log('节点值：',ele.nodeValue); //null
console.log('节点类型：',ele.nodeType); //1
4 获取元素
① 通过 ID 名
document.getElementById('ID名');
总结：
- 方法返回一个元素对象。
- 如果没有满足条件的元素返回 null。
// 根据ID名获取元素
var boxEle = document.getElementById('box');
console.log(boxEle);
② 通过标签名
// 从文档中获取
document.getElementsByTagName('标签名');// 从元素的后代中获取
element.getElementsByTagName('标签名');
总结：
- 方法返回一个 HTMLCollection 类型的对象，这是一个伪数组对象，里面的成员是元素对象。
- 如果没有满足条件的元素，返回空的集合。
③ 通过类名（了解，IE8 + 支持）
// 从文档中获取
document.getElementByClassName('类名');// 从元素的后代中获取
element.getElementsByClassName('类名');
总结：
- 方法返回一个 HTMLCollection 类型的对象，这是一个伪数组对象，里面的成员是元素对象。
- 如果没有满足条件的元素，返回空的集合。
// 从文档中获取所有类名是item的元素
//var pItems = document.getElementsByClassName('item');// 从box元素的后代中获取类名是item的元素
var boxEle = document.getElementById('box');
var pItems = boxEle.getElementsByClassName('item');
console.log(pItems);
console.log(pItems[0]);
//pItems[1].style.border = '2px solid red'// 给每个p元素进行操作，遍历集合
for (var i = 0; i < pItems.length; i ++) {pItems[i].style.border = '2px solid red';
}
④ 通过 name 属性值 （了解）
// 从文档中获取
document.getElementsByName('name属性的值');
总结：
- 方法返回一个 NodeList 类型的对象，与 HTMLCollection 相似，也是伪数组，里面的元素是元素对象。
- 如果没有满足条件的元素，返回空集合。
// 从文档中获取所有类名是name的元素
var pItems = document.getElementsByName('fangfang');console.log(pItems);
console.log(pItems[0]);
//pItems[1].style.border = '2px solid red'// 给每个p元素进行操作，遍历集合
for (var i = 0; i < pItems.length; i ++) {pItems[i].style.border = '2px solid red';
}
⑤ 使用选择器获取元素 (推荐)
// 从文档中获取
document.querySelector('选择器')；
document.querySelectorAll('选择器');// 从元素的后代中获取
element.querySelector('选择器');
element.querySelectorAll('选择器');
总结：
- querySelector() 方法返回一个元素对象，如果满足条件的元素有多个只取第一个，如果没有满足条件的元素返回 null。
- querySeleorAll() 方法返回 NodeList 集合，如果没有满足条件的元素返回空集合。
var ele = document.querySelector('#box');
// var ele = document.querySelector('#box .item');
// var ele = document.querySelector('[name="fangfang"]');
console.log(ele);// 获取元素的集合
var eles = document.querySelectorAll('#box p');
var eles = document.querySelectorAll('#box');
console.log(eles);var es = ele.querySelectorAll('p')
console.log(els);
⑥ 获取所有的元素
document.all
总结： 获取文档中所有的元素，是个 HTMLCollection 类型的集合
**注意：**使用 document.all 可以判断IE还是非IE，这是一个语法糖。
if (document.all) {document.write('我是IE浏览器！'); } else {document.write('我不是IE'); }
5 文档结构（元素关系）
5.1 节点树
childNodes 获取所有子节点的集合，是个 NodeList 类型的对象
firstChild 获取第一个子节点
lastChild 获取最后一个子节点previousSibling 获取紧邻在前面的兄弟节点
nextSibling 获取紧邻在后面的兄弟节点parentNode 获取父节点 html与父元素不一样
// 获取第二个div元素
var boxEle = document.querySelector('.box:nth-of-type(2)')
console.log(boxEle)// 获取子节点
console.log('boxEle的所有子节点：', boxEle.childNodes);
console.log('boxEle的第一个子节点：', boxEle.firstChild);
console.log('boxEle的最后一个子节点：', boxEle.lastChild);
console.log('boxEle的第二个子节点：', boxEle.childNodes[1]);// 获取兄弟节点
console.log('前面的一个兄弟节点：', boxEle.previousSibling.previousSibling);
console.log('后面的一个兄弟节点：', boxEle.nextSibling);// 获取父节点
console.log('父节点：', boxEle.parentNode);
console.log('父节点的父节点：', boxEle.parentNode.parentNode);
5.2 元素树
children 获取所有子元素的集合，是个 HTMLCollection 类型的数据
firstElementChild 获取第一个子元素
lastElementChild 获取最后一个子元素previousElementSibling 获取紧邻在前面的兄弟元素
nextElementSibling 获取紧邻在后面的兄弟元素parentElement 获取父元素
// 获取第二个div元素var boxEle = document.querySelector('.box:nth-of-type(2)');console.log(boxEle);// 获取子元素
console.log('boxEle所有的子元素：', boxEle.children);
console.log('boxEle的第一个子元素：', boxEle.firstElementChild);
console.log('boxEle的最后一个子元素：', boxEle.lastElementChild);
console.log('boxEle的第二个子元素：', boxEle.children[1]);console.log('前面的兄弟元素：', boxEle.previousElementSibling);
console.log('后面的兄弟元素：', boxEle.nextElementSibling);console.log('父元素：', boxEle.parentElement);
6 元素的属性操作
6.1 读写内置属性
元素.属性名;
// 获取到img元素
var imgEle = document.querySelector('#myImg');// 获取元素中某个属性的值
console.log(imgEle.alt);
console.log(imgEle.title);
console.log(imgEle.width);// 5s之后，换一张图片
setTimeout(function(){imgEle.src = 'images/小乐.jpg';
},5000);// 获取按钮元素
var btn = document.querySelector('#btn')
// 给按钮元素监听事件
btn.onclick = function() {imgEle.width += 20; //（宽度大20px)
}
6.2 读写自定义属性
元素.getAttribute('属性名') 读取属性的值，如果不存在概述返回 nulll
元素.setAttribute('属性名', '值') 设置属性的值，如果属性不存在会添加该属性
注意：
- getAttribute() 和 setAttribute() 可以操作写在标签上的所有属性，不论内置的还是自定义的。
- 如果要操作的属性是内置，使用
.属性名的方式；如果要操作的属性是自定义的再使用 getAttribute() 和 setAttribute()。
// 获取到 img 元素
var imgEle = document.querySelector('#myImg');// 获取自定义属性的值
console.log('自定义属性 loadpic 的值：', imgEle.loadpic);
console.log('自定义属性 loadpic 的值：', imgEle.getAttribute('loadpic'));// 设置自定义属性的值：
// imgEle.loadpic = '大悲不只有双下巴';
imgEle.setAttribute('loadpic', '大悲不只有双下巴');// getAttribute() 和 setAttribute() 不仅仅可以操作自定义属性
console.log(imgEle.getAttribute('alt'), imgEle.alt);
console.log(imgEle.getAttribute('height'), imgEle.height);
console.log(imgEle.getAttribute('width'), imgEle.width);
console.log(imgEle.getAttribute('src'), imgEle.src);
6.3 data-* 形式的自定义属性
HTML5标准建议标签中的自定义属性都是 data-message 、data-group-name 这样的形式，此种形式的自定义属性，DOM 提供了快捷的操作方式：
元素.dataset.属性名; // 可读可写imgEle.dataset.message; // 对应的是 data-messag 属性
imgEle.dataset.gorupName; // 对应的是 data-group-name 属性
// 获取到 img 元素
var imgEle = document.querySelector('#myImg');// 获取标准自定义属性的值
console.log(imgEle.getAttribute('data-message'));
console.log(imgEle.dataset.message);
console.log('');
console.log(imgEle.dataset.groupName);// 修改标准自定义属性的值
imgEle.dataset.message = '大悲脸大';
imgEle.dataset.groupName = 'B组';
JS-DOM-节点-获取元素-文档结构-元素的属性相关推荐
- html 打印出word文档,JS如何实现获取word文档内容并输出显示到html页面
JS如何实现获取word文档内容并输出显示到html页面 发布时间:2021-04-20 11:11:24 来源:亿速云 阅读:85 作者:小新 这篇文章主要介绍了JS如何实现获取word文档内容并输 ...
- 通过css类/选择器选取元素 文档结构和遍历 元素树的文档
通过css类选取元素 html所有的元素拥有class属性,该属性会对元素进行分组,标识为某一组. js中使用className属性来保存HTML的class的属性值 var NodeList = d ...
- js从服务器获取word文档,javascript - 使用Office.js API将Word文档（.docx）保存到后端服务器 - 堆栈内存溢出...
我在将byte数组(使用Office.js从Microsoft Office的任务窗格中获取)保存到Word文档文件(在服务器端)时遇到了一些麻烦. 这就是我在做什么: 我正在使用此库获取Word文档 ...
- html格式文档结构保存数据库6,freeCAD文档结构
一个freecad文档包含了你场景中的所有物体.它可以包含组及任何工作平台制造的物体.你可以切换工作台,但是它仍然工作在同一个文档上.当您保存您的工作时,该文件就被保存到磁盘上.你可以同时打开多个fr ...
- html语言文档结构,HTML的文档结构与语法（一）
一.走进Web开发 Web运行的原理: 二.HTML 1.1什么是html HTML是用来描述网页的一种语言 HTML指的是超文本标记语言(Hyper Text Markup Language) 超文 ...
- Win 10 开发中Adaptive磁贴模板的XML文档结构，Win10 应用开发中自适应Toast通知的XML文档结构...
分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...
- 【Java 强化】单元测试（JUnit3、JUnit4）、XML（语法、约束、文档结构）、DOM、DOM4J
Java 强化 软件测试 黑盒测试:软件测试工程师 白盒测试:软件开发工程师 单元测试(JUnit3.JUnit4) 使用 junit3.x(了解) 使用 junit4.x(掌握) 使用断言方式(了解 ...
- html5在线显示word文档,JS实现获取word文档内容并输出显示到html页面示例
本文实例讲述了js实现获取word文档内容并输出显示到html页面.分享给大家供大家参考,具体如下: title var w = new activexobject('word.application ...
- JS实现获取word文档内容并输出显示到html页面示例，和将页面数据写入txt文件
JS实现获取word文档内容并输出显示到html页面示例 注意:这里使用了ActiveXObject组建,因此需要使用IE内核浏览器运行本代码. <!DOCTYPE html> <h ...
最新文章
- python神奇时钟项目_Python Tkinter 数字时钟小项目
- 互联网生态建设落地五大挑战——保险科技生态建设...
- 一条数据的HBase之旅，简明HBase入门教程-Write全流程
- Linux 命令 alternatives和update-alternatives
- linux新建用户代码,Linux_用dsadd添加用户的代码，描述: 此工具命令将一些具体 - phpStudy...
- 出门问问CEO李志飞：当语音成为基石技术，消费场景如何进一步落地？
- Xib中用自动布局设置UIScrollView的ContenSize
- php生成excel带图片格式,php导出excel单元格带图片显示方法
- 智能配电台区监控系统方案
- 【sduoj】前端JSZip库的使用
- 你有想过如何合适地给 JavaScript 变量命名吗？
- 微信Android热补丁方案Tinker
- sudo must be owned by uid 0 and have the setuid bit set错误处理
- git PR合并提交（rebase方式）
- 深度学习---人脸检测（勿喷）
- @loj - 2478@「九省联考 2018」林克卡特树
- 百度APP“看听模式”：“AI主播”借道信息流全面落地？
- c语言中声明子程序,哪位师傅知道51单片机怎样编写子程序？C语言的。在主程序里调...
- java linux 微软雅黑_Linux下安装宋体以及微软雅黑字体
- Coding and Paper Letter（二十八）