2016.01.05 DOM笔记(一) 查找元素
DOM节点的种类
元素和标签是一个意思,例如<body>标签或者称为<body>元素
节点DOM的节点分为三类 元素节点,文本节点,属性节点
例如
<div id=‘box’>例子</div> 其中元素节点就是指这个div,文本节点就是指‘例子’这个文本,属性节点是指id
查找和定位节点
查找元素JS提供的几种方法:
- getElementsById()
document.getElementsById()
DOM操作必须要等到HTML文档加载完毕才能进行
怎样获取?
(1)把含有DOM操作的<script>标签移后
(2)使用onload事件
window.onload = function(){
//里面存放需要页面加载完毕后才要执行的代码
}
例如:
window.onload=function(){
var OneBox = document.getElementById('box');
} - OneBox.tagName 获取元素节点的标签名字
- OneBox.innerHTML 获取元素内的纯文本 注意纯文本的含意 包含HTML标签 是文本内容而不是文本节点
同时可以通过innerHTML来修改内容即进行赋值,而且此时可以解析HTML了而不再是纯文本的形式了
例如:OneBox.innerHTML='修炼<strong>JS</strong>'; - OneBox.id 获取id值
- OneBox.title 获取title值
- OneBox.style 获取style属性对象 如果想获取stley对象则需要类似这样获取:OneBox.style.css
- OneBox.className 获取css的class名字 即获取元素节点class属性的值
- OneBox.setAttribute('title','标题');创建一个属性和属性值
- getElementByTagName()
documet.getElementsByTagName()
例如HTML关于li标签的只有如下代码段:
<ul>
<li>示例1</li>
<li>示例2</li>
</ul>
使用
var OneLi = document.getElementsByTagName('li'); - OneLi就是一个带有li标签的HTML对象集合,利用OneLi[0]获取首个对象
- 同样有OneLi[0].innerHTML OneLi[0].tagName
ps:养成区分大小写的习惯 - getElementsByName()
- getElementsById()
2016.01.05 DOM笔记(一) 查找元素的更多相关文章
- 2016.01.07 DOM笔记(二) DOM节点
node节点属性 nodeName属性 oneBox= document.getElementsById('box');var s = oneBox.nodeName; //nodeName与tag ...
- DOM 之 document 查找元素方法
DOM 之 document 查找元素方法 getElementById("idName"); // 始终取得第一个 idName 的元素 getElementsByTagName ...
- JavaScript DOM操作之查找元素节点
概要: 编程接口 可通过 JavaScript 对 HTML DOM 进行访问. 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). ...
- extern “C”原理,用法以及使用场景-2016.01.05
1 问题提出 在编程过程中,经常发现如下用法: #ifndef _FILE_NAME_H_ #define _FILE_NAME_H_ #ifdef __cplusplus extern " ...
- jQuery使用(四):DOM操作之查找兄弟元素和父级元素
查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...
- C++笔记(7)——一些模拟题:简单模拟、查找元素、图形输出、日期处理、进制转换、字符串处理
以下内容基本来自<算法笔记>,作者为胡凡,建议直接买书看,我这里只是摘抄部分当笔记,不完整的. 简单模拟 就是一类"题目怎么说你就怎么做"的题目.这类题目不涉及算法,只 ...
- 058 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 05 案例:求数组元素的最大值
058 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 05 案例:求数组元素的最大值 本文知识点:求数组元素的最大值 案例:求数组元素的最大值 程序代码及其执行过程 ...
- 011 01 Android 零基础入门 01 Java基础语法 02 Java常量与变量 05 变量的三个元素的详细介绍之三—— 变量值——即Java中的“字面值”
011 01 Android 零基础入门 01 Java基础语法 02 Java常量与变量 05 变量的三个元素的详细介绍之三-- 变量值--即Java中的"字面值" 变量值可以是 ...
- DOM查找元素
1. 查找元素5种: 1. 按id查找1个元素对象: var elem=document.getElementById("id值"); 何时使用:1. 元素必须有id 2. 精确查 ...
随机推荐
- MYSQL的一些常用函数
#数学函数 SELECT ABS(-8);#绝对值SELECT CEILING(9.8);#查询大于等于给定数值的最小整数SELECT FLOOR(9.8);#查询小于等于给定数值的最大整数SELEC ...
- BZOJ(4) 1050: [HAOI2006]旅行comf
1050: [HAOI2006]旅行comf Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3984 Solved: 2236[Submit][St ...
- 如何让图片开口说话 3DMeNow教程
菜鸟玩3D--3DmeNow初级教程 3D软件对于我们这些菜鸟来说,一直是可望而不可及的一种东西,深奥的3D建模,复杂的面板操作--都使我们对之望而却步,有没有一种很简单的3D造型软件,使我们这些菜鸟 ...
- J2EE肌肉系统—四层模型
J2EE是基于JAVA技术的一种标准.为什么会有这种标准呢? 主要是在企业级应用开发其中有一些需求.比如数据库连接,邮件服务.事件处理等,都是一些通用模块. 而这些模块假设由开发者来开发.势必添加开发 ...
- 使用Code First建模自引用关系笔记 asp.net core上使用redis探索(1) asp.net mvc控制器激活全分析 语言入门必学的基础知识你还记得么? 反射
使用Code First建模自引用关系笔记 原文链接 一.Has方法: A.HasRequired(a => a.B); HasOptional:前者包含后者一个实例或者为null HasR ...
- 【POJ3074】Sudoku DLX(Dancing Links)
数独就要DLX,不然不乐意. 数独的DLX构造:9*9个点每一个点有9种选择,这构成了DLX的729行,每行.列.阵有限制,均为9行(/列/阵),然后每行(/列/阵)都有九种数的情况.于是就有了3*9 ...
- 【UML 建模】在线UML建模工具 ProcessOn 使用具体解释
总结 : -- 推荐理由 : 近期从 Windows 操作系统 转到 MAC 上, 正在看设计模式 和 重构, 找不到好用的 UML 工具, 因此在网上找了一款能够在线使用的 UML 工具, 用起来发 ...
- LeetCode 359. Logger Rate Limiter (记录速率限制器)$
Design a logger system that receive stream of messages along with its timestamps, each message shoul ...
- MFC:Win32-Dll及MFC-Dll编写调用
一.win32-dll 1.编写 代码例如以下: Math.h #ifdef MATH_EXPORTS #define MATH_API __declspec(dllexport) #else #de ...
- JPA学习笔记(13)——查询缓存
使用hibernate的查询缓存 运行下面代码: String jpql = "FROM User u WHERE u.id = ?"; Query query = entityM ...