JavaScript基础知识。

DOM ：

Document Object Model 文档对象模型

功能：控制HTML文档的内容。

1、创建：window.document

2、方法：

　　1、获取Element对象：getElementById（）

　　2、创建其他DOM对象：createAttribute（）

Element：元素对象。

　　1、获取：通过document。

　　2、方法：removeAttribute（）删除属性。setAttribute（）设置属性。

Node：节点对象。

　　1、特点：所有DOM对象都可以被认为是一个节点。

　　2、方法：增删改子节点：appendChild（）、removeChild（）、replaceChild（）

　　3、属性：parentNode 返回父节点。

练习：表格的增删。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>table{border: 1px solid;margin: auto    ;width: 500px    ;}</style>
</head>
<body>
<div><input type="text" id="id" placeholder="id"><input type="text" id="name" placeholder="name"><input type="button" value="add" id="add"><p></p>
</div>
<table  border="1" id="table"><tr><th>id</th><th>name</th><th>operate</th></tr>
</table>
<script>document.getElementById("add").onclick=function () {var id=document.getElementById("id").value;var name=document.getElementById("name").value;var id_node = document.createElement("id");var id_node_value=document.createTextNode(id)id_node.appendChild(id_node_value);var name_node = document.createElement("td");var name_node_value=document.createTextNode(name);name_node.appendChild(name_node_value);var a_node=document.createElement("td");var a_node_value=document.createElement("a");a_node_value.setAttribute("href","javascript:void(0)");a_node_value.setAttribute("onclick","del(this)");var a_value=document.createTextNode("delete");a_node_value.appendChild(a_value);a_node.appendChild(a_node_value);var tr_node=document.createElement("tr");tr_node.appendChild(id_node);tr_node.appendChild(name_node);tr_node.appendChild(a_node);var table=document.getElementById("table");table.appendChild(tr_node);}function del(obj) {var table=obj.parentNode.parentNode.parentNode;var tr=obj.parentNode.parentNode;table.removeChild(tr);}
</script>
</body>
</html>

HTML DOM：

1：标签体的设置和获取：innerHTML

上面的例子可以简化为：

<tr><td>id</td><td>name</td><td><a href="javascript:void(0)" onclick="del(this)"></a></td></tr>

2、控制样式

事件：

1、点击事件：onclick，ondblclick。

2、焦点事件：onblur：失去焦点 onfucus：获得

3、加载事件：onload

4、鼠标、键盘事件：

5、表单事件：onsubmit 返回true就提交、onreset

BOM：

Browser Object Model 浏览器对象模型，将浏览器各个组成部分封装成了对象。

组成：

1、Window：窗口对象。

　　1、特点：不需要创建可直接使用，window.方法（），window也可以省略，方法（）；

　　2、方法：弹出框：alert 警告、confirm 提示、prompt 输入。

　　　　　窗口：close 当前，open（网址）返回新的window对象。

　　3、属性：获取其他BOM对象：history .... 获取DOM对象：

2、Location：地址栏对象。

　　1、创建：location。

　　2、方法：reload（）。

　　3、属性：href，当前网址，href=“去哪儿”。

3、History：历史对象。

转载于:https://www.cnblogs.com/zhangyuhao/p/10356188.html

JavaScript基础知识。相关推荐

JavaScript 基础知识 - BOM篇
前言本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
js java用var_Java基础———JavaScript基础知识
原标题:Java基础---JavaScript基础知识 JavaScript基础知识(1) Javascript的历史,Javascript是什么? JavaScript 诞生于 1995 年. 它当 ...
JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性节点分类: 标签节点文本节点属性节点注释节点节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值常见的节 ...
javaweb(02) JavaScript基础知识
javaweb(02): JavaScript基础知识 JavaScript简介为什么出现JavaScript Javascript是什么 JavaScript和Java的关系? 就像卡巴斯基和巴基 ...
Javascript基础知识之四（常用数组方法）
一.MDN链接 Array - JavaScript | MDNJavaScript的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象.https://developer.moz ...
JavaScript基础知识与脚本语言总结
1 Aptana插件安装 1.Aptana插件安装 <1>Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE. <2>它的特点包括: J ...
JavaScript 基础知识 - 入门篇(二)
11. 函数 11.1 函数的基础知识为什么会有函数? 在写代码的时候,有一些常用的代码需要书写很多次,如果直接复制粘贴的话,会造成大量的代码冗余: 函数可以封装一段重复的javascript代码, ...
JavaScript 基础知识
JavaScript 基础知识文章目录 JavaScript 基础知识 @[toc] 一.JS的基本语法与结构 1.1 JavaScript 用法 1.2 JavaScript 输出 1.3 Jav ...
JavaScript 基础知识查漏补缺
JavaScript 基础知识查漏补缺(持续更新) 数据类型 var bool = '4.3' > '11' console.log(bool) // 结果为true,二者都为字符串,字符串之间 ...
网页游戏开发基础——JavaScript基础知识
对于初学编程的朋友来说,这篇文章有点长,而且会有点难懂.但是请不要放弃,我尽量以通俗的语言解释相关的编程概念,这里只讲解编写一个游戏需要的相关编程概念(如需要会在后面的文章中随时补充相关概念),对其余 ...

JavaScript基础知识。

JavaScript基础知识。相关推荐

最新文章

热门文章