javaScript中的DOM补充
一、DOM树
二、DOM节点
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
其中，document与element节点是重点。
三、节点查找
（1）直接查找节点
|
1
2
3
4
|
document.getElementById(“idname”)document.getElementsByTagName(“tagname”)document.getElementsByName(“name”)document.getElementsByClassName(“name”) |
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
</script>
局部查找
（2）、导航节点属性
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
注意，js中没有办法找到所有的兄弟标签！
四、节点操作
（1）、创建节点
1.createElement(标签名) ：创建一个指定名称的元素。
例：var tag=document.createElement(“input")
tag.setAttribute('type','text');
（2）、添加节点
2.somenode.appendChild(newnode) ：追加节点（作最后的子节点）
（3）、删除节点
3.removeChild()：获得要删除的元素，通过父元素调用删除
（4）. 替换节点
4. somenode.replaceChild(newnode, 某个节点);
五、节点属性操作
1、获取文本节点的值：innerText innerHTML
2、attribute操作
elementNode.setAttribute(name,value)
elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML)
elementNode.removeAttribute(“属性名”);
3.value获取当前选中的value的值
1.input
2.select （selectedIndex）
3.textarea
4、innerHTML 给节点添加html代码：
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;
5、关于class的操作：
elementNode.className
elementNode.classList.add
elementNode.classList.remove
6、改变css样式：
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
.style.fontSize=48px
六、事件类型
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开 onselect 文本被选中。
onsubmit 确认按钮被点击。
七、绑定事件
方式一：
<div id="div" onclick="foo(this)">点我呀</div> <script>
function foo(self){ // 形参不能是this;
console.log("点你大爷!");
console.log(self);
}
</script>
方式二：
<p id="abc">试一试!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
console.log("ok");
console.log(this); // this直接用
};
</script>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <form action="" id="submit">
<p>姓名<input type="text" name="user" id="user"></p>
<p>年龄<input type="text" name="age" id="age"></p>
<input type="submit" >
</form>
<input type="text" id="test"> <script>
var ele_form=document.getElementById("submit");
var ele_user=document.getElementById("user");
var ele_age=document.getElementById("age"); ele_form.onsubmit=function (event) {
var username=ele_user.value;
var age=ele_age.value; alert(username);
alert(age); // 两种阻止默认事件发生的方式 // 方式1
return false // 方式2
// event.preventDefault() }
</script>
<script>
var ele=document.getElementById("test")
ele.onkeydown=function (e) {
console.log(e.keyCode); if (e.keyCode==13){
alert(666)
}
}
</script>
</body>
onsubmit事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1{
width: 200px;
height: 200px;
background-color: wheat;
} .c2{
width: 100px;
height: 100px;
background-color: royalblue;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div> <script>
var ele1=document.getElementsByClassName("c1")[0];
var ele2=document.getElementsByClassName("c2")[0]; ele1.onclick=function () {
alert(123)
}; ele2.onclick=function (event) {
alert(456);
event.stopPropagation() // 阻止事件传播
}
</script>
</body>
事件传播
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.back{
width: 100%;
height: 2000px;
border: 1px solid red;
} .shade{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgray;
opacity: 0.5;
} .model{
position: fixed;
top: 100px;
left:40%;
width: 300px;
height: 200px;
background-color: white; }
.hide{
display: none;
}
</style> </head>
<body> <div class="back">
<button id="add">add</button>
</div>
<div class="shade hide"></div>
<div class="model hide">
<form action="">
<p>姓名<input type="text"></p>
<p>年龄<input type="text"></p> <input type="button" id="btn" value="提交">
</form>
</div> <script>
var ele_add=document.getElementById("add");
var ele_mdoel=document.getElementsByClassName("model")[0];
var ele_shade=document.getElementsByClassName("shade")[0];
ele_add.onclick=function () {
ele_mdoel.classList.remove("hide");
ele_shade.classList.remove("hide")
}
</script>
</body>
</html>
模态对话框
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 500px;
height: 300px;
border: 1px solid red;
}
</style> <script>
window.onload=function () {
var ele=document.getElementsByClassName("addBtn")[0];
var ele_del=document.getElementsByClassName("delBtn")[0];
var eleBtn=document.getElementsByClassName("repalceBtn")[0]; // 绑定的添加节点事件
ele.onclick=function () {
// 创建一个a标签
var ele_a=document.createElement("a");
console.log(ele_a); // <a></a>
ele_a.innerHTML="点击"; // <a>点击</a>
ele_a.setAttribute("href","http://www.baidu.com");
ele_a.id="d1"; // 创建img标签 var ele_img=document.createElement("img"); // <img>
ele_img.src="Bootstrap_i2.png"; // <img src="">
ele_img.height=50;
ele_img.width=50; // 添加标签 // 找到父标签
ele_p=document.getElementsByClassName("c1")[0];
// ele_p.appendChild(ele_a)
ele_p.appendChild(ele_img) };
// 绑定删除节点事件
ele_del.onclick=function () {
var ele_p=document.getElementById("p1");
var ele_parent=document.getElementsByClassName("c1")[0]; ele_parent.removeChild(ele_p); };
// 绑定替换节点事件
eleBtn.onclick=function () {
//创建的 新节点
var ele_img=document.createElement("img"); // <img>
ele_img.src="Bootstrap_i2.png"; // <img src="">
ele_img.height=50;
ele_img.width=50; // 被替换的节点
var ele_p=document.getElementById("p1"); // 父节点 var ele_parent=document.getElementsByClassName("c1")[0] // 做替换 ele_parent.replaceChild(ele_img,ele_p) } // 表格操作 var eles=document.getElementsByClassName("del") ;
for(var i=0;i<eles.length;i++){
eles[i].onclick=function () {
// console.log(this.parentElement.parentElement);
var ele_tr=this.parentElement.parentElement; var ele_tbody=document.getElementById("t1"); ele_tbody.removeChild(ele_tr); console.log(ele_tbody)
}
} }; </script> </head>
<body> <div class="c1">
<p id="p1">p1</p>
</div>
<button class="addBtn">ADD</button>
<button class="delBtn">del</button>
<button class="repalceBtn">repalceBtn</button>
<hr> <table border="1" > <tbody id="t1">
<tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><button class="del">del1</button></td>
</tr> <tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><button class="del">del2</button></td>
</tr> <tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><button class="del">del3</button></td>
</tr> <tr>
<td><input type="checkbox"></td>
<td><input type="text"></td>
<td><button class="del">del3</button></td>
</tr> </tbody> </table> <div>
<div>
<div></div>
</div>
</div> </body>
</html>
节点操作
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <input type="text" value="username" id="search"> <script>
var ele=document.getElementById("search") ele.onfocus=function () {
this.value=""
}; ele.onblur=function () {
if(this.value.trim()==""){
this.value="username"
}
}
</script>
</body>
each示列
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var ID;
function begin(){
if (ID==undefined){
showTime();
ID=setInterval(showTime,1000);
}
}
function end(){
clearInterval(ID);
ID=undefined;
}
</script> </body>
</html>
onchange事件
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var ID;
function begin(){
if (ID==undefined){
showTime();
ID=setInterval(showTime,1000);
}
}
function end(){
clearInterval(ID);
ID=undefined;
}
</script> </body>
</html>
onmouse事件
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <ul>
<li>111</li>
<li>222</li>
<li>333</li> </ul> <button>Add</button> <script> var eles_li=document.getElementsByTagName("li");
var ele_btn=document.getElementsByTagName("button")[0];
var ele_ul=document.getElementsByTagName("ul")[0];
// 添加li
ele_btn.onclick=function () {
var ele_li=document.createElement("li");
ele_li.innerHTML=444;
ele_ul.appendChild(ele_li)
}; // 绑定事件
for(var i=0;i<eles_li.length;i++){
eles_li[i].onclick=function () {
alert(this.innerHTML)
}
} // 事件委派 // ele_ul.addEventListener("click",function (e) {
// console.log(e.target); // 标签
// console.log(e.target.tagName); // 标签名称
//
// if(e.target.tagName=="LI"){
// console.log("OK")
// }
// }) </script>
</body>
事件委派
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
var s=12;
function f(){
console.log(s); // undefined
var s=12; //
console.log(s) //
}
f(); </script> </body>
</html>
作用域链
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var ID;
function begin(){
if (ID==undefined){
showTime();
ID=setInterval(showTime,1000);
}
}
function end(){
clearInterval(ID);
ID=undefined;
}
</script> </body>
</html>
时间框
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <button class="selectAll">全选</button>
<button class="reverse">反选</button>
<button class="cancel">取消</button> <hr>
<table border="1">
<tr>
<td ><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td ><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td ><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td ><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table> <script>
var ele_selectAll=document.getElementsByClassName("selectAll")[0];
var ele_reverse=document.getElementsByClassName("reverse")[0];
var ele_cancel=document.getElementsByClassName("cancel")[0];
var ele_input=document.getElementsByClassName("check");
ele_selectAll.onclick=function () {
for(var i=0;i<ele_input.length;i++){
ele_input[i].checked="checked"
}
};
ele_cancel.onclick=function () {
for(var i=0;i<ele_input.length;i++){
ele_input[i].checked=""
}
};
ele_reverse.onclick=function () {
for(var i=0;i<ele_input.length;i++){
var ele=ele_input[i];
if(ele.checked){
ele.checked=""
}
else {
ele.checked="checked"
}
}
};
</script> </body>
</html>
表格案例
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <input type="text" id="c1"> <select name="pro" id="s1">
<option value="1">河北省</option>
<option value="2">河南省</option>
<option value="3">北京省</option>
</select> <button>show</button> <script>
var ele_button=document.getElementsByTagName("button")[0]; ele_button.onclick=function () {
var ele_input=document.getElementById("c1");
var ele_select=document.getElementById("s1");
console.log(ele_select.value)
}; </script> </body>
</html>
获取value值
javaScript中的DOM补充的更多相关文章
- 借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- JavaScript中的DOM及相关操作
一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...
- 一些JavaScript中的DOM的优化小技巧
在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象 ...
- javascript中的DOM介绍（一）
一.基础知识点 1.DOM是文档对象模型,是针对HTML和XML文档的一个API(应用程序接口) 2.DOM描绘了一个层次化的节点数,允许开发人员进行添加,移除个修改等操作 3.IE浏览器中所有的DO ...
- Javascript中的DOM实现显示鼠标的空间位置
为了显示鼠标相对于浏览器的位置(相对于屏幕和页面类似),我们能够利用click事件,获得关于鼠标单击的事件对象event.这个事件对象里的clientX和clientY包括了鼠标的位置信息,所以我突发 ...
- 初步总结javascript中学习DOM之前的知识
嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把 ...
随机推荐
- 宇视4G设备采用GB/T28181协议成功接入EasyGBS国标流媒体平台的设置流程
经过了多天的调试对接,终于将宇视的布控球顺利接入到了EasyGBS的国标平台,特地写一下对接过程中遇到的问题,希望能帮助大家避开一些麻烦: 第一步:电脑连接无线网络IPCWIFI,密码12345678 ...
- android菜鸟学习笔记29----Android应用向用户发送提示信息的方式总结
常见的向用户发送提示信息的方式有3种,分别为: 1)发送Toast信息 2)弹出对话框 3)发送通知 总结如下: 方式1:发送Toast信息: 这种方式最简单,在之前的学习中多次使用过.Toast是在 ...
- STL学习笔记— —容器map和multimap
简单介绍 在头文件<map> 中定义 namespace std { template <typename Key, typename T, typename Compare = l ...
- Ubuntu14.04下Nginx反向代理Odoo域名
安装nginx sudo apt-get install -y nginx 修改配置文件 vi /etc/nginx/nginx.conf #注释掉下面这行代码 #include /etc/nginx ...
- python学习之路-第二天-常见的注意事项（代码风格、运算符、优先级、控制语句）
总结了今天学习几个注意事项: 对代码声明变量的时候没必要像以前写java或者c代码要声明数据类型,只需要赋值即可 代码一行基本只写一句逻辑行,而且尽量不在python里面写':' 明确的行连接'',暗 ...
- getchar,scanf以及缓冲区
getchar()是stdio.h中的库函数,它的作用是从stdin流中读入一个字符,也就是说,如果stdin有数据的话不用输入它就可以直接读取了.getch()和getche()是conio.h中的 ...
- MapInfo 文件格式说明
MapInfo 文件格式说明(id.map.tab.dat) (1). 属性数据的表结构文件.TAB 属性数据表结构文件定义了地图属性数据的表结构,包括字段数.字段名称.字段类型和字段宽度.索引字段及 ...
- iOS 52个技巧学习心得笔记 第一章 熟悉OC
1 .简单了解OC2 .在类的头文件中尽量少引入其他头文件3 .多用字面量语法 少用与之等价的方法 4 .多用类型常量 少用 #define 预处理指令5 .用枚举表示状态,选项,状态码 .简单了解O ...
- json教程系列（1）-使用json所要用到的jar包下载
json是个非常重要的数据结构,在web开发中应用十分广泛.我觉得每个人都应该好好的去研究一下json的底层实现,基于这样的认识,金丝燕网推出了一个关于json的系列教程,分析一下json的相关内容, ...
- flex for循环
//for ..in 循环中的迭代变量包含属性所保存的值和名称 //for each..in 循环中的迭代变量只包含属性所保存的值,而不包含属性的名称 //对象遍历,可以获取属性名称 private ...