DOM中的获得元素的方式
获取元素的方式:分为俩种:
1.直接获取:直接获取分为三种:
a,获取单个元素:
function demo1(){
var uid=document.getElementById("username");
alert(uid);
}
b,获取部分元素:
function demo3(){
var name=document.getElementsByName("sexn");
alert(name);
}
c,获取全部元素(同一类型的元素):
function demo2(){
var inp=document.getElementsByTagName("input");
alert(inp);
}
2.间接获取元素:
a,获取父类元素:
function demo5(){
//先获取子类结点:
var child= document.getElementById("hobby");
//再获取父类结点
var fu= child.parentNode;
console.log(fu);
}
b,获取子类元素:
function demo4(){
//先获取父类结点:
var fu=document.getElementById("gj");
//获得包括空白文档的子元素
var child=fu.childNodes;
var le=child.length;//11 [text, option, text, option, text, option, text, option, text, option, text]
//去除空白文档之后的子元素结点:
//var child=fu.childElementCount;// 5
console.log(child);
}
c,获取兄弟元素:
function demo6(){
//先获取兄弟中的一个结点
var i=document.getElementById("coun");
//获取下一个结点 nextSibling:包含空白文档 nextElementSibling:不包含空白文档
//var j=i.nextSibling;
var j=i.nextElementSibling;
//获取上一个结点:previousSibling:包含空白文档 previousElementSibling:不包含空白文档
//var h=i.previousSibling;
var h=i.previousElementSibling;
console.log(h);
}
间接获取,中又有俩种方法,一种是包含空白文档,一种是不包含的。
DOM中的获得元素的方式的更多相关文章
- DOM中常见的元素获取方式
1.getElementById获取元素 返回的是一个元素对象 var timer = document.getElementById('time'); console.dir 打印返回元 ...
- JavaScript中获取HTML元素的方式
JavaScript中获取HTML元素的方式 1.使用id方式获取元素,返回一个具体对象 document.getElementById(id名) 2.使用className方式获取元素,返回类数 ...
- JavaScript DOM三种创建元素的方式
三种创建元素的方式: document.write() element.innerHTML document.createElement() 初始HTML内容: <button>btn&l ...
- 关于DOM中的model(将元素转成对象进行操作)
DOM document (html, xml) object 将文档中的HTML元素转成js的对象 通过ID找到文档的元素转成js对象 var obj = document.getElementBy ...
- javascript总结40:DOM中操作样式的两种方式
1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...
- App自动化之dom结构和元素定位方式(包含滑动列表定位)
900×383 38 KB 先来看几个名词和解释: dom: Document Object Model 文档对象模型 dom应用: 最早应用于html和js的交互.界面的结构化描述, 常见的格式为h ...
- javascript判断元素存在和判断元素存在于实时的dom中的方法
今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动 ...
- Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...
- DOM中元素节点、属性节点、文本节点的理解
DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) ...
随机推荐
- 裸板中中断异常处理,linux中断异常处理 ,linux系统中断处理的API,中断处理函数的要求,内核中登记底半部的方式
1.linux系统中的中断处理 1.0裸板中中断异常是如何处理的? 以s5p6818+按键为例 1)按键中断的触发 中断源级配置 管脚功 ...
- linux 设置固定ip和dns
目录 1. centos 1.1 ifconfig 查看网卡名称 1.2 设置固定ip和dns 1.3 重启网络 2. ubuntu 2.1 ifconfig 查看网卡名称 2.2 设置固定ip和dn ...
- mongodb基本命令,mongodb集群原理分析
mongodb基本命令,mongodb集群原理分析 集合: 1.集合没有固定数据格式. 2. 数据: 时间类型: Date() 当前时间(js时间) new Date() 格林尼治时间(object) ...
- vue路由传参刷新丢失
没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...
- PostGIS 结合Openlayers以及Geoserver实现最短路径分析(一)
环境: Win10 ArcMap10.4(用于数据处理) postgresql9.4 postgis2.2.3 pgRouting2.3(postgresql插件) ##附上本文配套素材下载地址:ht ...
- nvidia gtx1050在kali linux系统下安装显卡驱动,且可以使用x-setting切换显卡
转自:https://www.zzhsec.com/255.html 1.更换源[使用中科大或者官方源都可以] 下面使用中科大的源 root@Andy:/home/dnt# vi /etc/apt/s ...
- 洛谷P1426-小鱼会有危险吗
原题链接: https://www.luogu.org/problem/P1426 题面简述: 有一次,小鱼要从A处沿直线往右边游,小鱼第一秒可以游7米,从第二秒开始每秒游的距离只有前一秒的98%98 ...
- 《浅入浅出》-RocketMQ
你知道的越多,你不知道的越多 点赞再看,养成习惯 本文GitHub https://github.com/JavaFamily 已收录,有一线大厂面试点脑图.个人联系方式和技术交流群,欢迎Star和指 ...
- 利用scrapy爬取腾讯的招聘信息
利用scrapy框架抓取腾讯的招聘信息,爬取地址为:https://hr.tencent.com/position.php 抓取字段包括:招聘岗位,人数,工作地点,发布时间,及具体的工作要求和工作任务 ...
- just_connect.py
# -*- coding=utf-8 -*-from mysql.connector import connect config = { 'host': '192.168.199.139', 'por ...