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文档呈现为带有元素.属性和文本的树结构(节 ...
随机推荐
- react-native环境搭建
目标平台 Android 开发平台 windows 开发环境安装建议:由于开发环境存在差异,建议参照react官网 或者react中文网 安装, react-native -- 在Windows下搭建 ...
- 【解决】Word 在试图打开文件时遇到错误 请尝试下列方法：* xxx * xxx * xxx
有好几种情况,我先说我的这个情况 1.word设置不当导致 看图: 然后就能打开了~ 2.word格式问题,比如原来是doc,被人手动改成docx~~~ 解决方法:改回来 3.word版本不兼容,比如 ...
- Sql Server系列：字符串函数
字符串函数用于对字符和二进制字符串进行各种操作,大多数字符串函数只能作用于char.nchar.varchar和nvarchar数据类型.字符串函数可以用在SELECT或者WHERE语句中. 1. A ...
- OPENVPN+MYSQL认证+客户端配置
安装环境:ubuntu 12.04 x64 一 服务器端 1.安装openvpn及相应包 1 2 root@jkb:~# aptitude install openvpn root@jkb:~# ap ...
- 数据可视化-EChart2.0使用总结1
图表是企业级Web开发必不可少的一个功能点.也是“数据可视化的一个具体呈现”.今天看到阮一峰翻译的“数据可视化:基本图表”一文,同时梳理一下公司现在项目使用的EChart2.0类库.阮一峰的文章同时也 ...
- T-Sql（八）字段索引和数据加密
t-sql的基本用法讲到第八章也差不多了,最后就讲下字段索引和数据加密,这两个内容对编程人员可能用的地方不是太多,还是那句老话“防患于未然”. 下面我就简单的说下字段索引和数据加密的内容,只是简单概述 ...
- C# 将PowerPoint文件转换成PDF文件
PowerPoint的优势在于对演示文档的操作上,而用PPT查看资料,反而会很麻烦.这时候,把PPT转换成PDF格式保存,再浏览,不失为一个好办法.在日常编程中和开发软件时,我们也有这样的需要.本文旨 ...
- 制作动画或小游戏——CreateJS基础类（一）
前面曾经记录过Canvas的基础知识<让自己也能使用Canvas>,在实际使用中,用封装好的库效率会高点. 使用成熟的库还能对基础知识有更深入的理解,CreateJS是基于HTML5开发的 ...
- Java继承与组合
Java继承与组合 继承 java 中使用extends关键字表示继承关系,当创建一个类时,如果没有明确指出要继承的类,则是隐式地从根类Object进行继承. 子类继承父类的成员变量 子类能够继承父类 ...
- OpenCV2:特征匹配及其优化
在OpenCV2简单的特征匹配中对使用OpenCV2进行特征匹配的步骤做了一个简单的介绍,其匹配出的结果是非常粗糙的,在这篇文章中对使用OpenCV2进行匹配的细化做一个简单的总结.主要包括以下几个内 ...