问题
只要标签有id这个属性,不使用getElementById方法,也可以直接用id获取dom元素。
解惑
经过一波搜索及查资料,原因大概是:如果dom元素的id名称不和js内置属性或全局变量重名的话,该名称自动成为window对象的属性,所以可以直接用来操作dom。看网上的说法是,这个是IE首先支持,火狐谷歌后面才支持的。不过现在还未形成标准,为了保险,还是不用的好。不过看各大浏览器都支持,觉得也许以后这个有可能直接成标准也说不定哈,到时候又可以省几个代码0.
在各大浏览器中的测试结果如下:
chorme浏览器中
firefox浏览器中
ie浏览器中(仿真ie5版)
1、
DOM
简介。
当页面加载时,
浏览器
会创建页面的文档对象模型(Document Object Model)。文档对象模型
定义
访问和处理
HTML
文档的标准方法。
DOM
将
HTML
文档呈现为带有
元素
、属性和文本的树结构,即节点树。通过
DOM
,
JS
可创建动态的
HTML
,可以使网页显示动态效果并实现与用户的交互功能。
JS
能够改变页面
中
所有的
HTML
元素
、属性和CSS样式,并对页面
中
所有事件做出响应。所以学习
JS
的起点就是处理网页,处理网页就需要使用
DOM
进行操作。
2、
DOM
获取
元素
。
JS
要想操作
HTML
元素
,那么首先就必须先找到该
元素
。通常使用以下几种方法完成:
通过
元素
设置的
id
找
先来看一个例子:不获取
id
也可以使用
id
元素
。Document小文你好console.log(box.innerText) //小文你好//上面的 box 并没有使用 var box=document.getElementBy
Id
('box') 来首先获得
元素
其实,不只是
id
可以这样, name 也是可以的。再来一个例子:不获取 name 也可以使用 name
元素
。Document小...
很少用的前端基础知识。
id
直接
在
js
中
使用
今天做了个模拟题,一个特别简单的程序,但是想来想去却憋了半天。越是简单的问题,越想表现一下自己。唉,不过还是想着做好吧,既然做完了,那就总结一下吧。
题目是这样的,实现一个这样的效果,如下两图。
看着很简单哈,可是写真正实现起来总是踩坑。
废话也不多说了,当时就想把那些奇奇怪怪的知识都用上,
直接
上代码吧。我把知识点也写在了里面。
<!DOCTYPE
html
>
<
html
lang="en">
分享一个有趣的经验
最近在学习
中
,偶然发现一个有趣情况:在
html
文档
中
可以在未
定义
变量的情况下
直接
通过
html
标签
上的
id
值获取到
dom
元素
并进行操作。
可以先看看如下的情况:
<!DOCTYPE
html
>
<
html
lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="w
id
th=device-w
id
th, initial-scale=1.0">
不获取
元素
,
直接
使用
id
操作
dom
元素
新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列![在这里插入图片描述](https://img-blog.csdnimg.cn/20191022190806461.png)表创建一个表格设定内容居
中
、居左、居右SmartyPants创建一个自
定义
列表如何创建一个注脚注释也是必不可少的...
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="w
id
th=dev
在
js
中
可以这么使用: (
id
名称).style.display="inline'; 而不是使用: document.getElementBy
Id
('
id
名称').style.display="inline"; 就像我在下面使用的一样,
js
不会报错而且还能准确执
浏览器
日常bug:
最近在复习javascript的时候发现了一个我还没有见过的一个有趣的东西,可能你也没有见过,所以就在这里记录一下:就是
js
中
直接
通过
id
名获取到这个
元素
,且不使用getElementBy
Id
等。
下面看代码:
HTML
部分的:
<form action="" method="">
你爱好的运动是?<input type="checkbox"
id
="checkedAllBox">全选/全不选
js
根据
id
获取页面
元素
1.getElementBy
Id
(
id
)
<div
id
="div
Id
">用javascript获取
Id
的方法getElementBy
Id
()的使用方法</div>
var obj = document.getElementBy
Id
("div
Id
");
以上是通过div的
id
号div
Id
获取div这个对象,然后就可以对div进行各种操作
如删除其内容,设置其属性,将其隐藏等等
值得注意的是:div 必须先于 javascript 代码加载
也就是 d