一、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补充的更多相关文章

  1. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  2. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  3. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  4. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  5. JavaScript中的DOM及相关操作

    一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...

  6. 一些JavaScript中的DOM的优化小技巧

    在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象 ...

  7. javascript中的DOM介绍(一)

    一.基础知识点 1.DOM是文档对象模型,是针对HTML和XML文档的一个API(应用程序接口) 2.DOM描绘了一个层次化的节点数,允许开发人员进行添加,移除个修改等操作 3.IE浏览器中所有的DO ...

  8. Javascript中的DOM实现显示鼠标的空间位置

    为了显示鼠标相对于浏览器的位置(相对于屏幕和页面类似),我们能够利用click事件,获得关于鼠标单击的事件对象event.这个事件对象里的clientX和clientY包括了鼠标的位置信息,所以我突发 ...

  9. 初步总结javascript中学习DOM之前的知识

    嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把 ...

随机推荐

  1. 宇视4G设备采用GB/T28181协议成功接入EasyGBS国标流媒体平台的设置流程

    经过了多天的调试对接,终于将宇视的布控球顺利接入到了EasyGBS的国标平台,特地写一下对接过程中遇到的问题,希望能帮助大家避开一些麻烦: 第一步:电脑连接无线网络IPCWIFI,密码12345678 ...

  2. android菜鸟学习笔记29----Android应用向用户发送提示信息的方式总结

    常见的向用户发送提示信息的方式有3种,分别为: 1)发送Toast信息 2)弹出对话框 3)发送通知 总结如下: 方式1:发送Toast信息: 这种方式最简单,在之前的学习中多次使用过.Toast是在 ...

  3. STL学习笔记— —容器map和multimap

    简单介绍 在头文件<map> 中定义 namespace std { template <typename Key, typename T, typename Compare = l ...

  4. Ubuntu14.04下Nginx反向代理Odoo域名

    安装nginx sudo apt-get install -y nginx 修改配置文件 vi /etc/nginx/nginx.conf #注释掉下面这行代码 #include /etc/nginx ...

  5. python学习之路-第二天-常见的注意事项(代码风格、运算符、优先级、控制语句)

    总结了今天学习几个注意事项: 对代码声明变量的时候没必要像以前写java或者c代码要声明数据类型,只需要赋值即可 代码一行基本只写一句逻辑行,而且尽量不在python里面写':' 明确的行连接'',暗 ...

  6. getchar,scanf以及缓冲区

    getchar()是stdio.h中的库函数,它的作用是从stdin流中读入一个字符,也就是说,如果stdin有数据的话不用输入它就可以直接读取了.getch()和getche()是conio.h中的 ...

  7. MapInfo 文件格式说明

    MapInfo 文件格式说明(id.map.tab.dat) (1). 属性数据的表结构文件.TAB 属性数据表结构文件定义了地图属性数据的表结构,包括字段数.字段名称.字段类型和字段宽度.索引字段及 ...

  8. iOS 52个技巧学习心得笔记 第一章 熟悉OC

    1 .简单了解OC2 .在类的头文件中尽量少引入其他头文件3 .多用字面量语法 少用与之等价的方法 4 .多用类型常量 少用 #define 预处理指令5 .用枚举表示状态,选项,状态码 .简单了解O ...

  9. json教程系列(1)-使用json所要用到的jar包下载

    json是个非常重要的数据结构,在web开发中应用十分广泛.我觉得每个人都应该好好的去研究一下json的底层实现,基于这样的认识,金丝燕网推出了一个关于json的系列教程,分析一下json的相关内容, ...

  10. flex for循环

    //for ..in 循环中的迭代变量包含属性所保存的值和名称 //for each..in 循环中的迭代变量只包含属性所保存的值,而不包含属性的名称 //对象遍历,可以获取属性名称 private ...