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

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. 基于docker搭建Jenkins+Gitlab+Harbor+Rancher架构实现CI/CD操作

    一.各个组件的功能描述: Docker 是一个开源的应用容器引擎. Jenkis 是一个开源自动化服务器. (1).负责监控gitlab代码.gitlab中配置文件的变动: (2).负责执行镜像文件的 ...

  2. ADO.NET学习心得《一》

    大家好,我是代号六零一,很高兴又开始重启博客了,为了更好的加深自己的记忆和复习,今天开始坚持写写心得体会,刚开始学习ADO.NET的时候也是一脸懵逼的,代码只有动手敲打才会知道其实并不难,只要多敲几遍 ...

  3. Linux访问控制列表

    首先我们来了解下权限,在Linux里常规的权限有r(读)w(写)x(执行),特殊权限有SUID,SGID,Sticky权限,分别作用在文件(或目录)的所有者,所属组和其他(既不是所有者,也不是所属组的 ...

  4. Spring 应用之Spring JDBC实现

    jdbcTemplate类的入门 方式一 POM.XML <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:x ...

  5. 你能说说Java中Comparable和Comparator的区别吗

    之前面试中被问到这个问题,当时不屑(会)回答,下来特意查了查,整理如下. Java 中为我们提供了两种比较机制:Comparable 和 Comparator,二者都是用来实现对象的比较.排序. 下面 ...

  6. SpringSecurity系列之自定义登录验证成功与失败的结果处理

    一.需要自定义登录结果的场景 在我之前的文章中,做过登录验证流程的源码解析.其中比较重要的就是 当我们登录成功的时候,是由AuthenticationSuccessHandler进行登录结果处理,默认 ...

  7. Worktile正式发布全新研发产品!

    经过近一年时间的打磨,Worktile研发产品正式发布啦!和以往Worktile版本升级不同的是,这是一个全新的产品形态,目前已上线 Agile(敏捷开发).Pipe(持续交付).Testhub(测试 ...

  8. nyoj 290 动物统计加强版 (字典树 (Trie) PS:map<TLE>)

    动物统计加强版 时间限制:3000 ms  |  内存限制:150000 KB 难度:4   描述 在美丽大兴安岭原始森林中存在数量繁多的物种,在勘察员带来的各种动物资料中有未统计数量的原始动物的名单 ...

  9. 新闻网页通用抽取器GNEv0.04版更新,支持提取正文图片与源代码

    GeneralNewsExtractor以下简称GNE是一个新闻网页通用抽取器,能够在不指定任何抽取规则的情况下,把新闻网站的正文提取出来. 我们来看一下它的基本使用方法. 安装 GNE 使用 pip ...

  10. Oracle10g安装步骤(一)

    本例使用安装程序:10201_database_win32 首先将所有文件提取解压出来后,执行setup.exe 安装步骤如下: