获取元素的方式:分为俩种:

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中的获得元素的方式的更多相关文章

  1. DOM中常见的元素获取方式

    1.getElementById获取元素    返回的是一个元素对象 var  timer = document.getElementById('time'); console.dir   打印返回元 ...

  2. JavaScript中获取HTML元素的方式

    JavaScript中获取HTML元素的方式 1.使用id方式获取元素,返回一个具体对象   document.getElementById(id名) 2.使用className方式获取元素,返回类数 ...

  3. JavaScript DOM三种创建元素的方式

    三种创建元素的方式: document.write() element.innerHTML document.createElement() 初始HTML内容: <button>btn&l ...

  4. 关于DOM中的model(将元素转成对象进行操作)

    DOM document (html, xml) object 将文档中的HTML元素转成js的对象 通过ID找到文档的元素转成js对象 var obj = document.getElementBy ...

  5. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...

  6. App自动化之dom结构和元素定位方式(包含滑动列表定位)

    900×383 38 KB 先来看几个名词和解释: dom: Document Object Model 文档对象模型 dom应用: 最早应用于html和js的交互.界面的结构化描述, 常见的格式为h ...

  7. javascript判断元素存在和判断元素存在于实时的dom中的方法

    今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动 ...

  8. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

  9. DOM中元素节点、属性节点、文本节点的理解

    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...

随机推荐

  1. linux 安装swoole扩展方法

    linux 安装swoole扩展方法 wget https://github.com/swoole/swoole-src/archive/v1.9.23.tar.gz接下去就不说了 说明下 下载swo ...

  2. fcgi-2.4.1.tar.gz 和 spawn-fcgi-1.6.4.tar.gz 百度云

    链接:https://pan.baidu.com/s/1nEzOkFC0-rfVMDy_BygLWg 提取码:ty0e 美好的东西都是免费滴

  3. IDEA升级,提示"Connection Error Failed to prepare an update"

    问题来源: 之前修改了IDEA的默认配置文件路径,然后升级新版本时就无法升级,提示"Failed to prepare an update Temp directory inside ins ...

  4. SpringBoot 2.x版本+MultipartFile设置指定文件上传大小

    SpringBoot-versio:2.1.9-RELEASE 由于新版本的SpringBoot已经弃用了如下, 这种方式,提供了新的 配置方案. 这个是官方的介绍 Handling Multipar ...

  5. 201871010114-李岩松《面向对象程序设计(java)》第四周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  6. 深入理解计算机系统 第三章 程序的机器级表示 Part1 第二遍

    第一遍对应笔记链接 https://www.cnblogs.com/stone94/p/9905345.html 机器级代码 计算机系统使用了多种不同形式的抽象,利用更简单的抽象模型来隐藏实现的细节. ...

  7. 【algo&ds】【吐血整理】4.树和二叉树、完全二叉树、满二叉树、二叉查找树、平衡二叉树、堆、哈夫曼树、B树、字典树、红黑树、跳表、散列表

    本博客内容耗时4天整理,如果需要转载,请注明出处,谢谢. 1.树 1.1树的定义 在计算机科学中,树(英语:tree)是一种抽象数据类型(ADT)或是实作这种抽象数据类型的数据结构,用来模拟具有树状结 ...

  8. Vue img的src使用数据绑定不显示

    不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. <img src="{{ imgUrl }}"/> 原因:写法错误 解决 ...

  9. 通过javascript 执行环境理解她

    古往今来最难的学的武功(javascript)算其一. 欲练此功必先自宫,愿少侠习的此功,笑傲江湖. 你将了解 执行栈(Execution stack) 执行上下文(Execution Context ...

  10. volatile变量能保证线程安全性吗?为什么?

    在谈及线程安全时,常会说到一个变量——volatile.在<Java并发编程实战>一书中是这么定义volatile的——Java语言提供了一种稍弱的同步机制,即volatile变量,用来确 ...