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文档呈现为带有元素.属性和文本的树结构(节 ...
随机推荐
- Java Web应用的开发环境配置
1:第一是下载好Eclipse开发工具,这里不做叙述,自行下载安装. 2:使用Eclipse开发WEB项目,启动Eclipse,选择File--->new --->other---> ...
- WCF学习之旅——第一个WCF示例（一）
最近需要用到WCF,所以对WCF进行了解.在实践中学习新知识是最快的,接下来先做了一个简单的WCF服用应用示例. 本文的WCF服务应用功能很简单,却涵盖了一个完整WCF应用的基本结构.希望本文能对那些 ...
- DataGrid中的常用属性
DataGrid中的常用属性 $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',w ...
- WPF根据Oracle数据库的表，生成CS文件小工具
开发小工具的原因: 1.我们公司的开发是客户端用C#,服务端用Java,前后台在通讯交互的时候,会用到Oracle数据库的字段,因为服务器端有公司总经理开发的一个根据Oracle数据库的表生成的cla ...
- WPF 浏览文件夹，获取其路径
public void GetPath(System.Windows.Controls.TextBox TB) { FolderBrowserDialog FBD = new FolderBrowse ...
- 写在最前面 - 每天5分钟玩转 OpenStack（1）
<每天5分钟玩转 OpenStack>是一个 OpenStack 教程,这是第 1 篇. 这个教程有下面两个特点: 系统讲解 OpenStack 从架构到各个组件:从整体到细节逐一讨论 重 ...
- r.js结合gulp等于webpack（angular为例）
本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等, ...
- Generator库co4.6使用及源码分析
原文链接 http://www.cnblogs.com/ytu2010dt/p/6043947.html co4.x已经抛弃了原来thunk转而结合promise实现. 一:promise proms ...
- C# 操作数据库表和数据库
<1>c#创建数据库表: private void CreatTable(string name) //创建数据库源数据表,name为表名 { con.ConnectionStr ...
- 解决java代码测试http协议505错误
代码功能:通过java代码获取网页源代码: 所用工具:Myclipse8.5+tomcat6.0+浏览器 系统环境:windows xp旗舰版 火狐浏览器版本: IE浏览器版本: 测试http协议有错 ...