javascript中DOM部分基础知识总结
<div id="box" style="width: 100px; height: 100px; "></div>
<input type="button" value="点击切换颜色" onclick="toggle();"/>
<script>
var box = document.getElementById("box");
function toggle() {
box.style.backgroundColor = "#f00";
}
</script>
<div id="box" style="width: 100px; height: 100px; " id="box"></div>
<input type="button" value="点击切换颜色" id="btn"/>
<script>
var box = document.getElementById("box");
var btn = document.getElementById("btn");
btn.onclick = function () {
box.style.backgroundColor = "#f00";
}
</script>
<input type="button" value="button" id="btn"/>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
alert("我说：哈哈哈");
},false);
btn.addEventListener("click", function () {
alert("她说：23333");
}, false);
//两次事件都会执行，这是区别于on方式的
</script>
//事件名称的区别
// addEventLisener中第一个参数type是click、load，不带on
// attachEvent中一个参数type是onclick、onload
//this的区别
// addEventLisener：事件处理程序会在当前对象的作用域运行，因此事件处理程序的this就是当前对象
// attachEvent：事件处理程序是在全局作用域下运行,因此this就是window
//获得页面标签之间文本内容的兼容性写法
function getInnerText(obj) {
if (obj.innerText) {
retrun obj.innerText;
} else {
return obj.textContent;
}
}
//设置页面标签之间的文本内容的兼容性写法
function setInnerText(obj, value) {
if(obj.innerText) {
obj.innerText = value;
} else {
obj.textContent = value;
}
}
<input type="button" value="按钮1" id="btn" aa="自己设置的类名">
<script>
var btn = document.getElementById("btn");
btn.value = "按钮2"; //设置属性，改变了原来的属性值
btn.bb = "自己设置的属性"; //实际上是添加不上去的
</script>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: rebeccapurple;
position: absolute;
}
</style>
</head>
<body>
<input type="button" id="btn" value="button">
<div id="box"></div>
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function () {
box.style.backgroundColor = "blue"; //5.3
box.style.width = " 400px"; //5.4
box.style.top = "200px"; //5.5
box.style.zIndex = "1"; //5.6
box.style.opacity = .5; //5.7
};
</script>
</body>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block; /*将行内元素转换成行内块元素，宽高才起作用*/
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: purple; /*紫色*/
}
.bd li {
height: 255px;
background-color: purple;
display: none; /*设置隐藏*/
}
.bd li.current {
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是体育模块</li>
<li>我的娱乐模块</li>
<li>我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script>
var box = document.getElementById("box");
var spans = box.getElementsByTagName("span");
var lis = box.getElementsByTagName("li");
for (var i = 0; i < spans.length; i++) {
spans[i].setAttribute("index", i);//设置自定义属性index
spans[i].onclick = function () {
for (var j = 0; j < spans.length; j++) {
spans[j].removeAttribute("class");
lis[j].removeAttribute("class");
}
this.setAttribute("class", "current");
//var index = this.getAttribute("index");//设置一个变量来获得自定义属性
//lis[index].setAttribute("class", "current");
lis[this.getAttribute("index")].setAttribute("class", "current");
};
}
</script>
|
a.标签节点
|
b.属性节点
|
c.文本节点
|
|
节点类型nodeType
|
节点名称nodeName
|
节点值nodeValue
|
|
克隆元素（标签）节点
|
cloneNode()
|
参数为True，深度克隆，克隆当前对象的一切子节点；为false，浅克隆，只会克隆标签，不包含文本信息
|
|
移除节点
|
removeChild
|
|
|
追加节点
|
appendChild
|
父节点.appendChild(子节点)
|
|
插入节点
|
insertBefore
|
|
|
获得属性节点
|
getAttributeNode
|
|
|
追加节点
|
appendChild
|
父节点.appendChild(子节点)
|
| 方法一、documenet.write(); |
写在函数里的话，会冲掉之前的元素，所以一般不用
|
|
| 方法二、innerHTML |
innerHTML比较方便，但要注意尽量不要频繁的拼接字符串
字符串具有不可变性，会重复开辟内存空间，一定要注意优化
可以考虑用数组代替
|
|
| 方法三、document.creatElement() |
如：appendChild()
removeChild()
insertBefore()
replaceChild()
|
javascript中DOM部分基础知识总结的更多相关文章
- day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
- javascript中BOM部分基础知识总结
一.什么是BOM BOM(Browser Object Document)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: 由于BOM主要用于管 ...
- JavaScript中BOM的基础知识总结
一.什么是BOM BOM(Browser Object Model)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: 由于BOM主要用于管理窗口 ...
- JavaScript中数组的基础知识和相关方法
数组基础 数组是大多数语言里面最常见的一种数据结构,它是一个有序的值列表. 创建数组 1.创建字面量数组 let arr=[]; 2.创建构造函数数组 let arr=new Array(); 注 ...
- ASP.NET中的C#基础知识
ASP.NET中的C#基础知识 说明:asp.net作为一种开发框架现在已经广为应用,其开发的基础除了前端的html.css.JavaScript等后端最重要的语言支持还是C#,下面将主要用到的基础知 ...
- MySQL中索引的基础知识
本文是关于MySQL中索引的基础知识.主要讲了索引的意义与原理.创建与删除的操作.并未涉及到索引的数据结构.高性能策略等. 一.概述 1.索引的意义:用于提高数据库检索数据的效率,提高数据库性能. 数 ...
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- javascript中正则表达式的基础语法
× 目录 [1]定义 [2]特点 [3]元字符[4]转义字符[5]字符组[6]量词[7]括号[8]选择[9]断言[10]模式[11]优先级[12]局限性 前面的话 正则表达式在人们的印象中可能是一堆无 ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
随机推荐
- Disk Space Usage 术语理解：unallocated, unused and reserved
通过standard reports查看Disk Usage,选中Database,右击,选择Reports->Standard Reports->Disk Space Usage,截图如 ...
- 实战MEF（1）：一种不错的扩展方式
在过去,我们完成一套应用程序后,如果后面对其功能进行了扩展或修整,往往需要重新编译代码生成新的应用程序,然后再覆盖原来的程序.这样的扩展方式对于较小的或者不经常扩展和更新的应用程序来说是可以接受的,而 ...
- js+css实现骰子的随机转动
网上找的例子,然后增添了新的东西,在这里展示一下...... 效果图预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- 基于keepalived搭建MySQL的高可用集群
MySQL的高可用方案一般有如下几种: keepalived+双主,MHA,MMM,Heartbeat+DRBD,PXC,Galera Cluster 比较常用的是keepalived+双主,MHA和 ...
- 关于MyCAT字符集的验证
MyCAT默认字符集是UTF8 下面通过查看日志来验证不同的MySQL客户端字符集和服务器字符集对于MyCAT的影响. 日志中与字符集有关的主要有三部分: 1. 初始化MyCAT连接池 2. 心跳检测 ...
- Android之vector代码修改颜色
前言:google给了很多material design icon,在开发过程中,可以下载下来直接使用,下载地址为https://materialdesignicons.com/ . 1.下载图标,并 ...
- 深入seajs源码系列三
入口方法 每个程序都有个入口方法,类似于c的main函数,seajs也不例外.系列一的demo在首页使用了seajs.use(),这便是入口方法.入口方法可以接受2个参数,第一个参数为模块名称,第二个 ...
- MyEclipse打不开jsp文件 报错“Failed to create the part's controls"
本来写好了一套网站html代码,需要移植到myeclipse的jsp页面中,当复制代码完毕后,也是可以运行的并不报错,但一直有弹框提示有空指针,当关闭页面后再次打开就歇菜了,提示 我预感到这可能是my ...
- Github团队开发示例（一）
Github团队开发示例(二) 作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/6044837.html 我们可以在Github上管理自己的团队项目.团队 ...
- mobileControls与移动控件适配
此配置节的作用在于指定各种控件在不同类型的移动设备显示的适配器,以达到适应各种设备不同的展示形式.例子如下, <mobileControls sessionStateHistorySize=&q ...