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文档呈现为带有元素.属性和文本的树结构(节 ...
随机推荐
- 20个JS优化代码技巧
原文网址链接为:http://www.jstips.co/ .截取了一部分本人认为比较实用的技巧分享给大家.其中一小部分技巧为JS面向对象的写法,不宜一一列出.关于JS面向对象的写法可参考本人前几篇随 ...
- 美图WEB开放平台环境配置
平台环境配置 1.1.设置crossdomain.xml 下载crossdomain.xml文件,把解压出来的crossdomain.xml文件放在您保存图片或图片来源的服务器根目录下,比如: htt ...
- [转]关于typedef的用法总结
不管实在C还是C++代码中,typedef这个词都不少见,当然出现频率较高的还是在C代码中.typedef与#define有些相似,但更多的是不同,特别是在一些复杂的用法上,就完全不同了,看了网上一些 ...
- SSIS Design4: 处理外键
假设一种场景:有一个ETL系统,通过记录数据最后更新的时间,对数据进行增量更新.如果Data Warehouse中存在有外键关系的两个表,Group(GroupID,StudentID,GroupDa ...
- Windows无法安装到这个磁盘。请确保在计算机的BIOS菜单中启用了磁盘控制器
今天一朋友问我这个问题,呃,以前我也遇到过,但忘记记录了,这次就记录一下吧,就懒得打字了,图片里面很清楚了 不说点什么的话是不是太水了O(∩_∩)O~,好吧扩充一下: Windows无法安装到这个磁盘 ...
- 【开源】OSharp框架解说系列（5.1）：EntityFramework数据层设计
OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...
- 【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧
引言 在现在的前端页面中,尤其是移动端,经常会需要将<header>或者是<footer>模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方,如下图所示. “回 ...
- Objective-C中的继承和多态
面向对象编程之所以成为主流的编程思想和他的继承和多态是分不开的,只要是面向对象语言都支持继承和多态,当然不同的OOP语言之间都有其特点.OC中和Java类似,不支持多重继承,但OOP语言C++就支持多 ...
- Deffered.js的实现原理
在艾伦的推荐下,看了一个日本人写的延时加载库,非常轻量,写的很棒.作为我的源码学习的第一编. 在认真看了两天之后,才看懂它的实现原理,我下面把通自己的理解,进行了精简.只程现原理,方便日后的回顾.&l ...
- ubuntu super daemon设置
super daemon是一个在Linux下面全面管理自己服务设置的东东,他可以接管很多服务的设定,只需要在/etc/xinetd.d/下面放置好自己的配置文件就可以了,那么,具体应该怎么配置呢? ...