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(节点类型) ...
随机推荐
- javascript 字符串转化成函数执行
javascript 字符串转化成函数执行<pre>function func_abc(){ alert('a');}var str = "func_abc";eval ...
- 开启docker远程访问
开启docker远程访问 进入到/lib/systemd/system/docker.service vim /lib/systemd/system/docker.service 找到ExecStar ...
- Java升级那么快,多个版本如何灵活切换和管理?
前言 近两年,Java 版本升级频繁,感觉刚刚掌握 Java8,写本文时,已听到 java14 的消息,无论是尝鲜新特性(Java12 中 Collectors.teeing 超强功能使用),还是由于 ...
- jquery ajax在 IE8/IE9 中无效
你们是不是也曾经和我以为遇到过这样的情况呢,jquery ajax在 IE8/IE9 中无效获取不到数据呢,经过熬夜找到好的东西和你们分享一下就是jQuery-ajaxTransport-XDomai ...
- nyoj 733-万圣节派对 (printf("%06d", i))
733-万圣节派对 内存限制:64MB 时间限制:1000ms 特判: No 通过数:5 提交数:7 难度:1 题目描述: 万圣节有一个Party,XadillaX显然也要去凑热闹了.因为去凑热闹的人 ...
- JavaWeb核心知识点
一:HTTP协议 一.概述 1. 概念:超文本传输协议 2. 作用:规范了客户端(浏览器)和服务器的数据交互格式 3. 特点 1. 简单快速:客户端向服务器请求服务时,仅通过键值对来传输请求方 ...
- 插入订单并且输出订单号的sql存储过程
--插入订单-- create proc InsertOrders ( @OrderNumber varchar(300), @OrderState varchar(30), @OrderType v ...
- mysql5.7下载与安装
一.完全卸载旧版mysql 参考文章:https://blog.csdn.net/hui1setouxiang/article/details/89816176 二.win10中下载安装mysql5. ...
- opencv各种小例子
图像腐蚀 #include <opencv2/highgui/highgui.hpp>//OpenCV highgui 模块头文件 ~ #include <opencv2/imgpr ...
- 万恶之源-python基本数据类型
万恶之源-基本数据类型(dict) 本节主要内容: 字典的简单介绍 字典增删改查和其他操作 3. 字典的嵌套 ⼀一. 字典的简单介绍 字典(dict)是python中唯⼀一的⼀一个映射类型.他是以{ ...