DOM-基本概念及使用
1、获取元素的方式总结
1、根据 id 的属性的值获取元素,返回值是一个元素对象
document.getElementById("id属性的值");
2、根据标签名获取元素,返回值是包含多个元素对象的伪数组
document.getElementsByTagName("标签名字"); 下面的几个,有的浏览器不支持。
3、根据 name 属性的值获取元素,返回值是包含多个元素对象的伪数组
document.getElementsByName("name属性的值");
// 通过 name 属性获取元素适用于表单标签,基本标签没有 name 属性
//基本标签:div,p,h1,ul,li,br等
//表单标签:input, select,option,form,textarea,datalist,label等
4、根据 class 类样式的名字获取元素,返回值是包含多个元素对象的伪数组
document.getElementsByClassName("class类样式的值");ie8等低版本浏览器不支持此方法。此方法属于 h5 的
5、根据 CSS 选择器获取元素,返回值是一个元素对象
document.querySelector("#id属性的值"); document.querySelector("标签的名字"); document.querySelector(".class类样式的值");
6、根据 CSS 选择器获取元素,返回值是包含多个元素对象的伪数组
document.querySelectorAll("#id属性的值"); document.querySelectorAll("标签的名字"); document.querySelectorAll(".class类样式的值");
注意:以上方法获取的元素的集合都是伪数组。
判断伪数组的方式是伪数组不能调用数组的方法。(Boolean(list.sort) == false)或者使用instanceof (list instanceof Array)。
伪数组怎么变为真数组?
定义一个空数组,把伪数组的所有内容复制过去即可。
注意点 知识点:
1,innerText 常用于双标签里面的文本获取,而 value 常指的是 单标签 如 input 里面得的文本。
2,阻止 a标签 跳转 在点击事件里面 添加 return false; 可以 a标签被点击事件 , 也可以是 a标签里面的 标签被点击事件。在事件里面添加 return false;
3,document.body 可以选中 body 标签,document 指的是 整个 html 包括的 页面。而 body 是html 下面的一个 子元素。
4,css 中的样式 如:background-color 在 js 下面操作样式时,要改写成 第一个字母大写的形式 如:backgroundColor。
5,通过 对象.className = “” 来设置样式。而不是 对象.class 。不像其他属性的 设置。
6,input 标签的 disabled ,文本框禁止被操作 。
2,innerText 和 textContent innerHTML
1、设置成对标签中文本内容:
innerText 属性是 IE8 标准属性,chrome,fireFox,IE8都支持。低版本火狐不支持
textContent 是W3C标准属性,chrome,firefox支持,IE8不支持。
2、获取成对标签中文本内容:
在 IE8 下使用 textContent 获取成对标签中文本内容,返回值为 undefined。
那么说明,浏览器不支持的属性的类型都为 undefined.
通过判断元素有无 textContent 属性(没有则元素的 textContent 属性为 undefined)来决定用 innerText 还是 textContent。
**innerText 属性:**设置和获取只能得到文本内容。
**innerHTML 属性:**不仅可以获得文本内容,还可以设置和获取 html 标签,让其显示或得到对应标签的格式。且任何浏览器都支持。
innerText textContent 和 innerHTML 都可以设置文本内容,推荐使用 innerHTML。
innerHTML
和 innerText
是获取某个元素内部的内容,而outerHTML
和 outerText
不仅获取某个元素内部的内容还包括这个元素本身内容。
内容摘录自:https://github.com/Daotin/Web/tree/master/04-DOM
转载于:https://www.cnblogs.com/xixiaijunjun/p/10461600.html
DOM-基本概念及使用相关推荐
- React:DOM树与虚拟DOM树(概念与区别)
React:DOM树与虚拟DOM树(概念与区别) DOM的本质: 浏览器中的概念,用JS对象来表示页面上的元素,并提供了操作DOM对象的API: React中的虚拟DOM: 是框架中的概念,是程序员 ...
- dom、dem、dsm的概念区别
DTM.DEM.DSM与DOM的概念 一.DTM(Digital Terrain Model) 数字地面模型是利用一个任意坐标系中大量选择的已知x.y.z的坐标点对连续地面的一个简单的统计表示,或者说 ...
- 自学js第十二天:DOM概念和基础操作
Web API 总结1: dom文档树的作用,就是把网页全部内容转为一个个js节点对象去操作 , 因此dom的文档树的内部组成就是有许多叶子node节点对象.分别有七种类型的叶子包含网页全部内容都有对 ...
- 了不起的Virtual DOM(一):起源
前言 首先欢迎大家关注我的掘金账号和Github博客,也算是对我的一点鼓励,毕竟写东西没法获得变现,能坚持下去也是靠的是自己的热情和大家的鼓励. 之所以想写本系列文章的主要原因是将近一个月时间没有写点 ...
- shadow dom一个最简单的例子
本文资料来自stackoverflow:https://stackoverflow.com/questions/34119639/what-is-shadow-root/34119775#341197 ...
- [JS-DOM]DOM概述
DOM: * 概念: Document Object Model 文档对象模型* 将标记语言文档的各个组成部分,封装为对象.可以使用这些对象,对标记语言文档进行CRUD的动态操作* W3C DOM 标 ...
- js笔记(五)文档对象模型DOM
大标题 小节 一.DOM选择器 1. id 选择器:getElementById("id名"): 2. class 选择器:getElementByClassName(" ...
- JavaScript DOM编程艺术第二版学习(1/4)
接下来项目需要网页相关知识,故在大牛的指引下前来阅读本书. 记录方式:本书分四部分阅读,完成阅读之后会多写一篇包括思维导图的算是阅读指南的东西,浏览的童鞋看着指南可以跳过一些不必要的坑~ 当前水平:H ...
- javascript--DOM概念
BOM概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用jav ...
- JavaScript之DOM对象(Node结点属性、导航属性、页面查找)
文章目录 DOM与Node节点 自身属性 导航属性 页面查找 DOM与Node节点 1.DOM的概念 DOM 是 W3C(万维网联盟)的标准,DOM 定义了访问 HTML 和 XML 文档的标准. W ...
最新文章
- 软件开发者的“比天之翼”
- 常用 Linux 命令
- 外星人入侵 python 飞船位置_《python从入门到实践》项目一:外星人入侵
- Microsoft宣布正式发布Linux on ASE
- excel表格不够怎么添加_excel怎么添加筛选
- python和java学哪个好-python和java自学哪个好?
- Android Message和obtainMessage的区别
- 也谈zabbix性能优化
- html高德地图的使用方法,高德地图的使用方法
- postman接口测试
- EPSON爱普生系列打印机清洗更换墨盒方法
- 威金又现!专杀收集整合
- 【前端性能优化】图片加载优化
- 电脑屏幕亮度,细说电脑屏幕亮度怎么调
- 查看k8s的etcd数据
- php国际象棋棋盘,php趣味编程 - php输出国际象棋棋盘 - 小徐
- 皇甫兵兵php,段颎 汉 文旅网 - powered by phpwind.net
- 区块链投资人李明轩:区块链通过多中心化机制解决传统互联网问题|筱静观察
- 面向对象:期待让我眼前一亮的你
- 开发要不要做测试,怎么做?