搜索
查看
编辑修改
首页
UNITY
NODEJS
PYTHON
AI
GIT
PHP
GO
CEF3
JAVA
HTML
CSS
搜索
小小林熬夜学编程
这个屌丝很懒,什么也没留下!
关注作者
热门标签
jquery
HTML
CSS
PHP
ASP
PYTHON
GO
AI
C
C++
C#
PHOTOSHOP
UNITY
iOS
android
vue
xml
爬虫
SEO
LINUX
WINDOWS
JAVA
MFC
CEF3
CAD
NODEJS
GIT
Pyppeteer
article
热门文章
1
实现 Castor 数据绑定--转
2
Linux常用的分区方案及目录结构_linux svr目录
3
【git】解决提交文件过大 Please remove the file from history and try again
4
2022年深度学习在时间序列预测和分类中的研究进展综述_bert能进行时序预测嘛
5
Android基础--调用系统相机,打开相册,展示到界面,出现的一些问题Uri为空,data为null,图片错乱问题_android.intent.action.pick 返回data null
6
LRU页面置换算法_lru进行页面置换的方法
7
特征工程之特征选择_l1正则化与特征选择
8
QT Widget: 自定义Widget组件及创建和使用动静态库
9
【C++入门到精通】C++类型的转换 | static_cast | reinterpret_cast | const_cast | dynamic_cast [ C++入门 ]
10
启动http-server后,进入localhost地址出现TypeError: Readable.from is not a function
当前位置:
article
> 正文
JS获取网页中HTML元素的几种方法_js是可以根据网址直接获取html
作者:小小林熬夜学编程 | 2024-02-18 21:10:12
赞
踩
js是可以根据网址直接获取html
编写js程序的时候最常使用的就是获取网页中的html元素,并进行处理,我在网上发现了一篇获取html对象的几种方法进行整理的帖子,发上来大家一块学习~
getElementById getElementsByName getElementsByTagName 大概介绍
getElementById ,getElementsByName ,getElementsByTagName
后两个是得到集合,byid只是得到单个对象
getElementById 的用法
举个例子:
<a id="link1" name="link1" href=http://homepage.yesky.com>网页陶吧</a>
同一页面内的引用方法:
1、使用id:
link1.href,返回值为http://homepage.yesky.com
2、使用name:
document.all.link1.href,返回值为http://homepage.yesky.com
3、使用sourseIndex:
document.all(4).href //注意,前面还有HTML、HEAD、TITLE和BODY,所以是4
4、使用链接集合:
document.anchors(0).href
//全部的集合有all、anchors、applets、areas、attributes、behaviorUrns、bookmarks、 boundElements、cells、childNodes、children、controlRange、elements、embeds、 filters、forms、frames、images、imports、links、mimeTypes、options、plugins、 rows、rules、scripts、styleSheets、tBodies、TextRectangle,请参考MSDN介绍。
其实方法3和方法4是一样使用的集合,只是一个是all,可以包括页面所有标记,而anchors只包括链接。
5、getElementById:
document.getElementById("link1").href
6、getElementsByName:
document.getElementsByName("link1")[0].href //这也是一个集合,是所有name等于该方法所带参数的标记的集合
7、getElementsByTagName:
document.getElementsByTagName("A")[0].href //这也是一个集合,是所有标记名称等于该方法所带参数的标记的集合
8、tags集合:
document.all.tags("A")[0].href
//与方法7一样是按标记名称取得一个集合
除此之外:
event.scrElement可以获得触发时间的标记的引用;
document.elementFromPoint(x,y)可以获得x和y坐标处的元素的引用;
document.body.componentFromPoint(event.clientX,event.clientY)可以获得鼠标所在处元素的引用;
还可以通过元素的父子节点和兄弟节点关系来引用,如nextSibling(当前节点的后一节点)、previousSibling(当前节点的前一节点)、childNodes、children、firstChild、lastChild、parentElement等都是父子节点和兄弟节点的一些引用;还不仅限于此。
上面是同一页面内的常见引用方法,另外还涉及到不同页面中的
getElementsByName返回的是所有name为指定值的所有元素的集合
“根据 NAME 标签属性的值获取对象的集合。”
集合比数组要松散的多, 集合里每个子项的类型可以不同, 集合只是把某些元素放在一起作为一类来使用, 相比之下数组就严格多了, 每个子项都是统一的类型. document.getElementsByName, document.getElementsByTagName, document.formName.elements 这类方法所得到的结果都是集合.
例:
复制内容到剪贴板
代码:
function get(){
var xx=document.getElementById("bbs")
alert("标记名称:"+xx.tagName);
}
function getElementName(){
var ele = document.getElementsByName("happy");
alert("无素为happy的个数:" + ele.length);
}
获取文件指定的元素
document.getElementsByName()这个方法.它对一个和多个的处理是一样的,我们可以用:
Temp = document.getElementsByName('happy')来引用
当Temp只有1个的时候,那么就是Temp[0],有多个的时候,用下标法Temp循环获取
也有例外:
在ie 中getElementsByName(“test“)的时候返回的是id=test的object数组,而firefox则返回的是name= test的object的数组。
按照w3c的规范应该是返回的是name= test的object的数组。
firefox和ie中的getElementByID相同:获取对 ID 标签属性为指定值的第一个对象的引用。
注意getElementsByName 有s在里面
document.getElementById()可以控制某个id的tag
document.getElementsByName(),返回的是一个具有相同 name 属性的元素的集合,而不是某个,注意有“s”。
而 document.getElementsByTagName() 返回的是一组相同 TAG 的元素集合。
同一个name可以有多个element,所以用document.getElementsByName("theName")
他return 一个collection,引用的时候要指名index
var test = document.getElementsByName('testButton')[0];
id那个,是唯一的
还应该注意:对类似没有name属性,对它name属性为伪属性document.getElementsByName() 会失效,当然TD可以设置ID属性,然后用 document.getElementsByID("DDE_NODAY"); 调用
*****************************************************************************************************************
最长16位,请使用英文字母/数字/-/_的组合
function check_uid()
{
var uid = document.frmUserInfo.UserID.value;
if(uid!="")
{
var url = "check_uid.php?UserID="+uid;
window.open(url,"newwinname","width=430,height=198,scrollbars=yes");
}
else
alert("请填写帐号");
}
声明:
本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:
https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/110590
推荐阅读
article
养老
院
|基于
Springboot
的
养老
院
管理系统
设计与实现(源码+
数据库
+文档)_智慧
养老
推荐 sp...
计算机上安装
养老
院
管理系统
软件来发挥其高效地信息处理的作用,可以规范信息管理流程,让管理工作可以系统化和程序化,同时,养...
赞
踩
article
HTML
+
CSS
:
3D
轮播
卡片
...
整个页面的背景是一个占据整个屏幕的背景图片,并且页面内容被隐藏在背景图片之下。
HTML
+
CSS
:
3D
轮播
卡片
...
赞
踩
article
element
-
ui
table
表头
文字
不换行,
文字
过长
点点
...
展示,同时给表头添加悬浮提示.....
表头
文字
不换行超过
点点
...
展示给表头添加悬浮提示在
element
中的
table
对slot-scope的值封装成了一个大...
赞
踩
article
swt
入门---
http
://
www
.
blogjava
.
net
/dreamstone/archive...
swt
入门 --常用组件的使用
swt
的常用组件button ,text ,combo,list ,还有一些容器类com...
赞
踩
article
html
页面
上传
图片
回显
,
html
js
上传
图片
并
回显
...
html
js
上传
图片
并
回显
发布时间:2018-08-03 14:27,浏览次数:808, 标签:
html
jssrc=...
赞
踩
article
html
实现
调取
手机
相机进行
拍照
上传
——技能提升
_
拍照
上传
的
插件
html
...
今天同事问我一个我之前参与
的
项目,由于之前只做了样式,并没有书写功能,因此同事接手后需要做一个
html
实现
手机
拍照
上传
的
...
赞
踩
article
Print
.
js
实现
打印
pdf
,
HTML
,图片(可设置样式可分页)_print
js
...
Print
.
js
四种
打印
类型:'
pdf
'、'html'、'image'、'
js
on'一文搞懂_print
js
printj...
赞
踩
article
[
HTML
]Web
前端开发
技术22(
HTML
5
、
CSS3
、
JavaScript
)
HTML
5
基础与...
前言
CSS3
转换transform 属性 2.
CSS3
3D 转换
CSS3
过渡transition 属性Transi...
赞
踩
article
Flutter
:
加载
本地
Html
、
WebView
与JS交互_
flutter
loadurl
html
...
本次教程使用的是
Flutter
官方提供的WevView组件webview_
flutter
2.3.1,
flutter
_a...
赞
踩
article
编程
新手导论_
关于
方法
reg
和do
reg
,说法正确的
是
用户访问流程
是
reg
reg
.
html
dor...
第二部分 导论,这一部分主要
是
关于
编程
的导论,(要懂得一点思想具备一点常识)《设计,编码,,与软工》(
编程
与思想)这一章...
赞
踩
article
Python
爬虫——使用
XPath
和
lxml
库解析
HTML
_lis =
html
.
xpath
('//...
文章目录0 安装
XPath
Helper 插件1
XPath
语法1.1 节点1.2 谓语2
lxml
库使用实例2....
赞
踩
article
python3
爬虫五大模块之四:网页解析器
_
soup
= beautiful
soup
(
html
, ...
Python的爬虫框架主要可以分为以下五个部分:爬虫调度器:用于各个模块之间的通信,可以理解为爬虫的入口与核心(main...
赞
踩
article
html
div
图
层
,
Div
+
CSS
布局
入门教程
(2.写入整体
层
结构与
CSS
)_
html
/
css
_...
Div
+
CSS
布局
入门教程
(2.写入整体
层
结构与
CSS
)接下来我们在桌面新建一个文件夹,命名为“DIV+
CSS
布局练习...
赞
踩
article
echarts
大屏
可视化
,
HTML
+
CSS
加载全国、或某一
省市
(
安徽省
)(各个
省市
县)
地图
_
html
...
echarts
大屏
可视化
,
HTML
+
CSS
加载全国、或某一
省市
(
安徽省
)(各个
省市
县)
地图
_
html
+
css
大屏
页面开发...
赞
踩
article
html
在框架里
弹出
页面
,
iframe
弹出
新
窗口
iframe
页面
打开
新
窗口
问题...
如何使
iframe
中的链接都在
新
窗口
打开
a.
html
文件源码如下 如何让所有链接在
新
窗口
打开
2008-07-24 21:...
赞
踩
article
HTML
弹出
框功能_
html
弹出
框...
HTML
弹出
框功能_
html
弹出
框
html
弹出
框
HTML
弹...
赞
踩
article
html
+
jquery
/js+
css
实现
Table
tr
鼠标
悬停
/点击
出现
弹窗,显示表格行数据_h...
html
定义一个div作为弹窗,主要实现的控制样式:display=‘block/none’,使我们定义的div隐藏或者...
赞
踩
article
HTML
+
CSS
大
作业
:使用
html
设计
一个简单好看的公司官网
首页
浮动布局_
企业
首页
html
...
企业
首页
html
...
赞
踩
article
jquery
html
()
方法
返回图片,
jQuery
html
()
方法
...
jQuery
html
()
方法
html
()
方法
获取或设置所选元素的内容(innerHTML)。使用
html
()
方法
获取...
赞
踩
article
Html
中几种
图片格式
的
区别与使用--我
的
笔记_
src
=
"
.png
"
html
...
在HTML中通过 img
src
=“图片路径” 引入图片。常见
的
图片格式
有JPEG(JPG),PNG,GIF.GIF图片...
赞
踩
相关标签
spring boot
养老院管理系统
养老院
java
毕设
课程设计
源码
css
前端
若冰说CSS
elementui
shell
开发工具
html页面上传图片回显
html
vue.js
javascript
pdf
html5
计算机学习
css3
android
屏幕适配
flutter