web前端学习(四)JavaScript学习笔记部分(7)-- JavaScript DOM对象控制HTML元素详解
1、方法
getElementsByName() | 获取name | 可以获取一个数组类型数据(参数加引号) |
getElementsByTagName() | 获取元素 | |
getAttribute() | 获取元素属性 | 获取元素的变量调用这个方法,(参数为元素属性) |
setAttribute() | 设置元素属性 | |
childNodes() | 访问子节点 | 子节点可以有很多个 |
parentNode() | 访问父节点 | 父节点只有一个 |
createElement() | 创建元素节点 | |
createTextNode() | 创建文本节点 | |
insertBefore() | 插入节点 | |
removeChild() | 删除节点 | |
offsetHeight()、offsetWidth() | 网页尺寸 | 不包含滚动条的宽度、高度 |
scrollHeight()、scrollWidth() | 网页尺寸 | 包含滚动条的宽度、高度 |
子节点,父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>节点1</li>阿范德萨发
<li>节点2</li>
<li>节点3</li>
<li>节点4</li></ul>
<script>
function getChildNode(){
var childnode = document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length);/*空格区域也算一个节点*/
alert(childnode[1]);/*会打印出节点的类型*/
alert(childnode[1].innerHTML);/*打印出节点的内容*/
alert(childnode[2]);/*打印出内容:object Text*/
alert(childnode[1].nodeType);
}
getChildNode();
</script>
</body>
</html>
appendChild,insertBefore
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<p id="pid">div的元素</p>
</div>
<script>
function createNode(){
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "按钮";
body.appendChild(input);/*向body的末尾添加一个元素*/
} function addNode(){
var div = document.getElementById("div");
var node = document.getElementById("pid");
var newnode = document.createElement("p");
newnode.innerHTML = "动态添加一个p元素";
div.insertBefore(newnode,node);/*在。。。之前添加一个元素*/
}
createNode();
addNode();
</script>
</body>
</html>
removeNode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<p id="pid">div的元素</p>
</div>
<script>
function removeNode(){
var div = document.getElementById("div");
var p = div.removeChild(div.childNodes[1]);
}
removeNode();/*什么都不输出就对了*/
</script>
</body>
</html>
offsetHeight:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<p id="pid">div的元素</p>
</div>
<script>
function getSize(){
var width = document.documentElement.offsetWidth||document.documentElement.offsetWidth;
/*这样写会让所有浏览器兼容*/
var height = document.documentElement.offsetHeight;
alert(width+","+height);
}
getSize();/*什么都不输出就对了*/
</script>
</body>
</html>
web前端学习(四)JavaScript学习笔记部分(7)-- JavaScript DOM对象控制HTML元素详解的更多相关文章
- javascript - DOM对象控制HTML元素详解
1.方法 getElementsByName() -- 获取name getElementByTagName() -- 获取 getAttribute() --获取元素属性 se ...
- web前端--知识点,笔记叠加(javascript,jquery,html5+css3.0,ajax)
函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
- jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解
本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html) ;在每个匹配元素的外层添加一层DOM元素 ...
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么?
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}
前端之前端初识 前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...
- 史上最全web.xml配置文件元素详解
一.web.xml配置文件常用元素及其意义预览 <web-app> <!--定义了WEB应用的名字--> <display-name></display-na ...
随机推荐
- 【学术篇】状态压缩动态规划——POJ3254/洛谷1879 玉米田Corn Field
我要开状压dp的坑了..直播从入门到放弃系列.. 那就先拿一道状压dp的水题练练手吧.. 然后就找到了这一道..这道题使我清醒地认识到阻碍我的不是算法,而是视力= = 传送门: poj:http:// ...
- 使用Cookie实现用户商品历史浏览记录
该功能分为四个模块: 1. 获取所有商品并以链接的形式显示 out.write("网站商品: <br/>"); Map<String, Book> book ...
- 2016.8.19上午初中部NOIP普及组比赛总结
2016.8.19上午初中部NOIP普及组比赛总结 链接:https://jzoj.net/junior/#contest/home/1338 这次总结发得有点晚啊!我在这里解释一下, 因为浏览器的问 ...
- NOIP 2017 提高组 day1t2 时间复杂度
P3952 时间复杂度 标签 NOIp提高组 2017 时空限制 1000ms / 128MB 小明正在学习一种新的编程语言 A++,刚学会循环语句的他激动地写了好多程序并 给出了他自己算出的时间复杂 ...
- 可持久化线段树(主席树)——静态区间第k大
主席树基本操作:静态区间第k大 #include<bits/stdc++.h> using namespace std; typedef long long LL; ,MAXN=2e5+, ...
- 前端面试题之一JAVASCRIPT(理论类)
一.请描述一下 cookies.sessionstorage .localstorage 和session的区别?(1)cookie是网站为了标示用户身份而储存在用户本地终端(client side) ...
- date函数
- 深入浅出 Java Concurrency (29): 线程池 part 2 Executor 以及Executors[转]
Java里面线程池的顶级接口是Executor,但是严格意义上讲Executor并不是一个线程池,而只是一个执行线程的工具.真正的线程池接口是ExecutorService. 下面这张图完整描述了线程 ...
- codeforces 1195D2-Submarine in the Rybinsk Sea
传送门:QAQQAQ 题意:自己看 思路:就是一个类似于数位DP的东西... 统计a[i]数位分解的数在每一位出现的个数,即分两种讨论: 1.位数小于当前j,则j会出现在q+i,而且计算顺序互换会计算 ...
- PAT甲级——A1088 Rational Arithmetic
For two rational numbers, your task is to implement the basic arithmetics, that is, to calculate the ...