javascript - DOM对象控制HTML元素详解
1.方法
getAttribute() --获取元素属性 setAttribute() --设置元素属性 childNodes() --访问子节点 parentNodes() --访问父节点 createElement() --创建元素节点 createTextNode --创建文本节点 insertBefore() --插入节点 removeChild() --删除节点 offsetHeight --返回,任何一个元素的高度包括边框和填充,但不是边距 scrollHeight --返回整个元素的高度(包括带滚动条的隐蔽的地方) |
getElementsByName() -- 获取name
123456789<script>
function
getName() {
var
count = document.getElementsByName(
"pn"
);
alert(count.length);
//count.length = 3
var
p = count[2];
p.innerHTML =
"World"
;
}
getName();
</script>
123456<a id=
"aid"
title=
"得到了a标签的属性"
></a>
function
getAttr() {
var
anode = document.getElementById(
"aid"
);
var
attr = anode.getAttribute(
"title"
);
alert(attr);
}
childNodes() --访问子节点
1
2
3
4
5
6
7
8
9
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
function
getChildNode() {
var
childnode = document.getElementsByTagName(
"ul"
)[0].childNodes;
alert(
"length:"
+ childnode.length +
",nodeName:"
+ childnode[0].nodeName);
}
123456789<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
function
getChildNode() {
var
childnode = document.getElementsByTagName(
"ul"
)[0].childNodes;
alert(
"length:"
+ childnode.length +
",nodeName:"
+ childnode[0].nodeName);
}
createElement() --创建元素节点
1
2
3
4
5
6
7
8
|
function createNode() { var body = document.body; var input = document.createElement( "input" ); input.setAttribute( "value" , "按钮" ); input.setAttribute( "type" , "button" ); body.appendChild(input); } createNode(); |
insertBefore() --插入节点
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div id= "div" > <p id= "pid" >这个第 1 个位置</p> </div> <script type= "text/javascript" > function addNode() { var div = document.getElementById( "div" ); var pid = document.getElementById( "pid" ); var newnode = document.createElement( "p" ); newnode.innerHTML = "这个新增加的P" ; div.insertBefore(newnode, pid); } addNode(); </script> |
javascript - DOM对象控制HTML元素详解的更多相关文章
- web前端学习(四)JavaScript学习笔记部分(7)-- JavaScript DOM对象控制HTML元素详解
1.方法 getElementsByName() 获取name 可以获取一个数组类型数据(参数加引号) getElementsByTagName() 获取元素 getAttribute() 获取元 ...
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- 4.8.2.JSDOM对象控制HTML元素详解
1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title ...
- jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...
- jQuery 源码分析(二十一) DOM操作模块 删除元素 详解
本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...
- jQuery 源码分析(二十) DOM操作模块 插入元素 详解
jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
- JavaScript原生对象属性和方法详解——Array对象
http://www.feeldesignstudio.com/2013/09/native-javascript-object-properties-and-methods-array/ lengt ...
- jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解
本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html) ;在每个匹配元素的外层添加一层DOM元素 ...
随机推荐
- OpenGL图元的颜色属性
OpenGL支持两种颜色模式:一种是RGBA,一种是颜色索引模式. 1. RGBA颜色RGBA模式中,每一个像素会保存以下数据:R值(红色分量).G值(绿色分量).B值(蓝色分量)和A值(alpha分 ...
- BZOJ 4580: [Usaco2016 Open]248
Description 一个序列,每次可以把相邻的两个数合为一个,价值+1,求最后的最大价值. Sol 区间DP. \(f[i][j]\) 表示 \(i-j\) 中合成一个数字为多少,转移就是枚举断点 ...
- Github GUI 托管代码教程
附录:克隆仓库到本地:git clone https://github.com/chzeze/WeiboHomeCrawl.git
- php多线程抓取信息测试例子
php多线程抓取信息测试例子 PHP 5.3 以上版本,使用pthreads PHP扩展,可以使PHP真正地支持多线程.多线程在处理重复性的循环任务,能够大大缩短程序执行时间. PHP扩展下载:htt ...
- 仿QQ侧滑菜单<大自然的搬运工-代码不是我的>
1.记录下效果图 2.二个工具类 package myapplication.com.myapplicationfortest.utils; import android.util.Log; /** ...
- CentOS6.5安装Tab增强版:bash-completion
CentOS6.5安装Tab增强版:bash-completion,可补全命令参数: 因为CentOS官方源并不带有bash-completion的包,所以,为了可用yum安装,增加epel的源, 首 ...
- How to keep Environment Variables when Using SUDO
The trick is to add environment variables to sudoers file via sudo visudo command and add these line ...
- AngularJS之Provider, Value, Constant, Service, Factory, Decorator的区别与详解
本文转载自http://camnpr.com/javascript/1693.html 首先,provider, value, constant, service, factory他们都是provid ...
- 配置tomcat的虚拟路径
配置tomcat的虚拟路径有两个地方需要配置,以eclipse为例: ①在tomcat的server.xml中的host节点内添加 <Context path="/meims/user ...
- MAC OS X 常用通用快捷键
注:由于使用的是Windows键盘,习惯了Ctrl + c/v复制粘贴,所以修改了修饰键,Command(⌘)键和Control(^)键互换,以下的Ctrl键均为Command键,对应键盘上的实际左C ...