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(节点类型) ...
随机推荐
- SSM整合相关试题
1.下列关于Spring自动装配的说法中,错误的是() A 在Spring配置文件中,可以通过<bean>元素的autowire属性指定自动装配方式 B autowire属性值可以设置为n ...
- Dart编程语言从基础到进阶1
Dart编程语言从基础到进阶Dart的语言的发展史以及Dart能做什么未来发展怎么样等等问题我们在这里是不讨论的.我相信既然选择了来学习它,那你内心基本已经认可了它,所以我们废话不多说直接进入主题. ...
- Unity 横版2D移动跳跃问题——关于一段跳与二段跳
1.初始条件: 1.角色只绑定一个碰撞体,移动时施加力或给予速度,用跳跃次数JumpTimes或者bool值OnGround判断是否在地面. 2.只用一个tilemap搭建2D场景,因此所有tilem ...
- Apache Spark 3.0 预览版正式发布,多项重大功能发布
2019年11月08日 数砖的 Xingbo Jiang 大佬给社区发了一封邮件,宣布 Apache Spark 3.0 预览版正式发布,这个版本主要是为了对即将发布的 Apache Spark 3. ...
- 013.Kubernetes二进制部署worker节点Nginx实现高可用
一 Nginx代理实现kube-apiserver高可用 1.1 Nginx实现高可用 基于 nginx 代理的 kube-apiserver 高可用方案. 控制节点的 kube-controller ...
- windows7设置定时任务运行ThinkPHP框架程序
1. 设置Windows的任务计划 可以参考win7计划任务的设置方法 2. 新建Windows执行文件bat 新建cron.bat文件,内容如下: D: cd \wamp\www\tp32 D:\w ...
- thinkphp两表,多表联合查询及分页的连贯操作写法
ThinkPHP中关联查询(即多表联合查询)可以使用 table() 方法或和join方法,具体使用如下例所示: 1.原生查询示例: 代码如下: $Model = new Model(); $sql ...
- ThinkPHP6 核心分析:系统服务
什么是系统服务?系统服务是对于程序要用到的类在使用前先进行类的标识的绑定,以便容器能够对其进行解析(通过服务类的 register 方法),还有就是初始化一些参数.注册路由等(不限于这些操作,主要是看 ...
- django学习与实践
Django简介 Django是一个由Python写成的开放源代码的Web应用框架,它最初是被用来开发管理劳伦斯出版集团旗下的一些以新闻内容为主的网站,即CMS(内容管理系统)软件. 并于2005 ...
- beyong Compare4解决30天的评估期结束
刚开始是删掉注册表的CacheId(无效) 1.在搜索栏中输入 regedit ,打开注册表2.删除项目CacheId :HKEY_CURRENT_USER\Software\Scooter Soft ...