https://www.cnblogs.com/haiyan123/p/7598320.html
一, 什么是 HTML DOM
HTML Document Object Model(文档对象模型)
HTML DOM 定义了访问和操作 HTML 文档的标准方法
HTML DOM 把 HTML 文档呈现为带有元素, 属性和文本的树结构(节点树)
二, DOM 树
画 dom 树是为了展示文档中各个对象之间的关系, 用于对象的导航.
三, DOM 节点
1. 节点类型
HTML 文档中的每个成分都是一个节点.
DOM 是这样规定的:
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
其中, document 与 element 节点是重点.
2. 节点关系
节点树中的节点彼此拥有层级关系.
父 (parent), 子(child) 和同胞 (sibling) 等术语用于描述这些关系. 父节点拥有子节点. 同级的子节点被称为同胞(兄弟或姐妹).
在节点树中, 顶端节点被称为根(root)
每个节点都有父节点, 除了根(它没有父节点)
一个节点可拥有任意数量的孩子
同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分, 以及节点之间的关系:
3. 节点查找
有两种方式:
方式一: 直接查找节点(这是一个查找方法)
/ 节点查找(节点也就是一个个的标签)
- document.getElementById('idname');// 按照 id 查找, 拿到的是一个标签对象
- document.getElementsByClassName('classname');// 按照 class 标签去找, 得到的是一个数组里存放的标签
- document.getElementsByTagName('tagname');// 通过标签名去找, 拿到的也是一个数组
- var a = document.getElementsByName('yuan'); // 按照 name 属性去找, 拿到的也是一个数组
- console.log(a);
- // / ==2.========================
- var ele = document.getElementById('div1');
- console.log(ele.length);// 返回 undified
- var ele2 = document.getElementById('div3');
- console.log(ele2.length);// 返回 undified
- var ele3 = document.getElementsByClassName('div2');
- console.log(ele3.length); // 返回 1
- var ele4 = document.getElementsByTagName('p');
- console.log(ele4.length) ;// 返回 1
- var ele5 = document.getElementsByName('haiyan');
- console.log(ele5.length); // 返回 1
- //====3.=============================
id 和 name 的不支持
- var div1=document.getElementById("div1");
- //// 支持;
- var ele= div1.getElementsByTagName("p");
- alert(ele.length);
- //// 支持
- var ele2=div1.getElementsByClassName("div2");
- alert(ele2.length);
- //// 不支持
- var ele3=div1.getElementById("div3");
- alert(ele3.length);
- //// 不支持
- var ele4=div1.getElementsByName("yuan");
- alert(ele4.length)
length 属性
上述的 length: 返回的是标签的个数,, 一个是在局部下的,,, 一个是在全局下的(document.~~~)
方式二: 导航查找节点: 通过某一个标签的位置去查找另一个标签(这是一个导航属性)
- '''
- parentElement // 父节点标签元素
- children // 所有子标签
- firstElementChild // 第一个子标签元素
- lastElementChild // 最后一个子标签元素
- nextElementtSibling // 下一个兄弟标签元素
- previousElementSibling // 上一个兄弟标签元素
- '''
- // 方式二: 导航查找
- //<div id ='div1'>
- // <div class="div2" name = 'haiyan'>lallala</div>
- // <div name="haiyan">lkkaakkka</div>
- // <div id ='div3'>aaaaaaaaaaaaaa</div>
- // <p>hrllo</p>
- //</div>
- // 注意: 1. 如果是数组的话后面切记 getElementsByClassName('div2')[0]
- // 2. 查找元素的那些方法 Elements 加了 s 的打印的就是数组
- // 1,==================
- var ele = document.getElementsByClassName('div2')[0];
- var ele1= ele.parentElement;
- console.log(ele1) ;// 找 div2 标签的父亲
- // 2.===============
- var ele = document.getElementById('div1');
- var ele1 = ele.children;
- console.log(ele1) ; // 找到 div1 下的所有的子标签
- // 3.===================
- var ele = document.getElementById('div1');
- var ele1 = ele.firstElementChild;
- console.log(ele1); // 找到 div1 下的第一个子标签的元素
- // 4.==================
- var ele = document.getElementById('div1');
- var ele1 = ele.lastElementChild;
- console.log(ele1); // 找到 div1 下的最后一个子标签的元素
- // 5.===============
- var ele = document.getElementsByName('haiyan')[0];
- var ele1 = ele.nextElementSibling;
- console.log(ele1) ; // 下一个兄弟标签元素
- // 6.===============
- var ele = document.getElementsByName('haiyan')[0];
- var ele1 = ele.previousElementSibling;
- console.log(ele1) // 上一个兄弟标签元素
四, DOM Event(事件)
1. 事件类型
onclick 当用户点击某个对象时调用的事件句柄.
ondblclick 当用户双击某个对象时调用的事件句柄.
onfocus 元素获得焦点. 练习: 输入框
onblur 元素失去焦点. 应用场景: 用于表单验证, 用户离开某个输入框时, 代表已经输入完了, 我们可以对它进行验证.
onchange 域的内容被改变. 应用场景: 通常用于表单元素, 当元素内容被改变时触发.(三级联动)
onkeydown 某个键盘按键被按下. 应用场景: 当用户在最后一个输入框按下回车按键时, 表单提交.
onkeypress 某个键盘按键被按下并松开.
onkeyup 某个键盘按键被松开.
onload 一张页面或一幅图像完成加载.
onmousedown 鼠标按钮被按下.
onmousemove 鼠标被移动.
onmouseout 鼠标从某元素移开.
onmouseover 鼠标移到某元素之上.
onmouseleave 鼠标从元素离开
onselect 文本被选中.
onsubmit 确认按钮被点击
2. 绑定事件方式
方式一
- <!-- 绑定事件的方式一 -->
- <div onclick="foo(this)">div</div>
- <div class="c1">div2</div>
- <script>
- function foo(self) {
- console.log(self); //<div onclick="foo(this)" style="color: red;">
- self.style.color = 'red';
- }
- // 方式二
- // 事件的绑定方式 2: 标签对象. on 事件 = function (){}
- var ele=document.getElementsByClassName("c1")[0];
- ele.onclick=function () {
- console.log(this); // this 代指: 当前触发时间的标签对象;
- this.style.fontSize="30px"
- };
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <input type="text" id="search" value="请输入用户名" onclick="func1()" onblur="func2()">
- <script>
- var ele = document.getElementById("search");
- function func1() {
- if (ele.value == "请输入用户名") {
- ele.value = "";
- }
- }
- function func2() {
- if (!ele.value.trim()) {
- ele.value = "请输入用户名";
- }
- }
- </script>
- </body>
- </HTML>
实例 1
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <script>
- function func1() {
- var ele = document.getElementsByClassName("div1")[0];
- alert(ele.innerHTML);
- }
- </script>
- </head>
- <body onload="func1()">
- <div class="div1">
- hello div
- </div>
- </body>
- </HTML>
onload
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <div class="div1">
- hello div1
- </div>
- <div class="div1">
- hello div2
- </div>
- <div class="div1">
- hello div3
- </div>
- <div class="div1">
- hello div4
- </div>
- <div class="div1">
- hello div5
- </div>
- <p id="pp">
- hhhhhhhhhhhh
- </p>
- <p id="hh" onclick="func(this)">
- hhhhhhhhhhhh
- </p>
- <script>
- function func(para) {
- para.style.color = "red";
- console.log(para); // <p id="hh" onclick="func(this)">hhhhhhhhhhhh</p>
- console.log(para.previousElementSibling); // <p id="pp">hhhhhhhhhhhh</p>
- }
- var ele1 = document.getElementById("pp");
- ele1.onclick = function() {
- alert(123);
- }
- var ele2 = document.getElementsByClassName("div1");
- for (var i = 0; i < ele2.length; ++i) {
- ele2[i].onclick = function() {
- alert(ele2.length);
- }
- }
- </script>
- </body>
- </HTML>
JavaScript(JS)之 JavaScript 对象 DOM(三)
来源: http://www.bubuko.com/infodetail-2990924.html