本篇文章给大家谈谈js中dom是什么意思啊，以及js中dom节点常用属性，希望对各位有所帮助，不要忘了收藏本站喔。
一、DOM定义
-
DOM，全称Document Object Model文档对象模型。
-
JS中通过DOM来对HTML文档进行操作Deepl降重。只要理解了DOM就可以随心所欲的操作WEB页面。
-
文档
– 文档表示的就是整个的HTML网页文档
-
对象
– 对象表示将网页中的每一个部分都转换为了一个对象。 -
模型
– 使用模型来表示对象之间的关系，这样方便我们获取对象。
二、模型
根据Html文档结构如下：
三、节点
-
节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。
-
比如:html标签、属性、文本、注释、整个文档等都是一个节点。
-
虽然都是节点，但是实际上他们的具体类型是不同的。
-
比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
-
节点的类型不同，属性和方法也都不尽相同。
常用的节点分为四类：
– 文档节点:整个HTML文档
– 元素节点:HTML文档中的HTML标签
– 属性节点:元素的属性
– 文本节点:HTML标签中的文本内容
3.1、文档节点(document)
• 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。
• document对象作为window对象的属性存在的，我们不用获取可以直接使用。
• 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。
3.2、元素结点(Element)
• HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。
• 浏览器会将页面中所有的标签都转换为一个元素节点， 我们可以通过document的方法来获取元素节点。
• 比如:
– document.getElementById()
– 根据id属性值获取一个元素节点对象。
3.3、文本结点(Text)
-
文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本 都是文本节点。
-
它包括可以字面解释的纯文本内容。
-
文本节点一般是作为元素节点的子节点存在的。
-
获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本 节点。
-
例如:
– 元素节点.firstChild;
– 获取元素节点的第一个子节点，一般为文本节点
3.4、属性节点(Attr)
-
属性节点表示的是标签中的一个一个的属 性，这里要注意的是属性节点并非是元素 节点的子节点，而是元素节点的一部分。
-
可以通过元素节点来获取指定的属性节点。
-
例如:
– 元素节点.getAttributeNode("属性名");
-
注意:我们一般不使用属性节点。
四、事件
-
事件，就是文档或浏览器窗口中发生的一 些特定的交互瞬间。
-
JavaScript 与 HTML 之间的交互是通过事 件实现的。
-
对于 Web 应用来说，有下面这些代表性的事件:点击某个元素、将鼠标移动至某个 元素上方、按下键盘上某个键，等等。
对于事件，自成一节内容，后面详细学习。
五、获取节点
5.1、获取元素节点
• 通过document对象调用
1. getElementById()
– 通过id属性获取一个元素节点对象
2. getElementsByTagName()
– 通过标签名获取一组元素节点对象
3. getElementsByName()
– 通过name属性获取一组元素节点对象
5.2、获取元素节点的子节点
• 通过具体的元素节点调用
1. getElementsByTagName()
– 方法，返回当前节点的指定标签名后代节点
2. childNodes
– 属性，表示当前节点的所有子节点
3. firstChild
– 属性，表示当前节点的第一个子节点
4. lastChild
– 属性，表示当前节点的最后一个子节点
5.3、获取父节点和兄弟节点
• 通过具体的节点调用
1. parentNode
– 属性，表示当前节点的父节点
2. previousSibling
– 属性，表示当前节点的前一个兄弟节点
3. nextSibling
– 属性，表示当前节点的后一个兄弟节点
六、节点属性
6.1、元素结点的属性
• 获取，元素对象.属性名 例:element.value
element.id element.className
• 设置，元素对象.属性名=新的值 例:element.value = “hello”
element.id = “id01” element.className = “newClass”
6.2、其他属性
• nodeValue
– 文本节点可以通过nodeValue属性获取和设置
文本节点的内容
• innerHTML
– 元素节点通过该属性获取和设置标签内部的html代码
七、节点操作
7.1、节点修改
• 这里的修改我们主要指对元素节点的操作。
• 创建节点
– document.createElement(标签名)
• 删除节点
– 父节点.removeChild(子节点)
• 替换节点
– 父节点.replaceChild(新节点 , 旧节点)
• 插入节点
– 父节点.appendChild(子节点)
– 父节点.insertBefore(新节点 , 旧节点)
7.2、使用CSS选择器进行查询
-
querySelector()
-
querySelectorAll()
-
这两个方法都是用document对象来调用，两个方法使用相同， 都是传递一个选择器字符串作为参数，方法会自动根据选择器 字符串去网页中查找元素。
-
不同的地方是querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。
八、常用例子
8.1、dom常用查询
dom常用查询主要有getElementById(),getElementsByTagName,getElementsByName等，这根据你在声明标签时定义的信息。下面是简单使用的例子：
| < type="text/java"> /* * 定义一个函数，专门用来为指定元素绑定单击响应函数 * 参数： * idStr 要绑定单击响应函数的对象的id属性值 * fun 事件的回调函数，当单击元素时，该函数将会被触发 */ function myClick(idStr , fun){ var btn = document.getElementById(idStr); btn.onclick = fun; } window.onload = function(){ //为id为btn01的按钮绑定一个单击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ //查找#bj节点 var bj = document.getElementById("bj"); //打印bj //innerHTML 通过这个属性可以获取到元素内部的html代码 alert(bj.innerHTML); }; //为id为btn02的按钮绑定一个单击响应函数 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ //查找所有li节点 //getElementsByTagName()可以根据标签名来获取一组元素节点对象 //这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中 //即使查询到的元素只有一个，也会封装到数组中返回 var lis = document.getElementsByTagName("li"); //变量lis for(var i=0 ; i<lis.length ; i++){ alert(lis[i].innerHTML); } }; //为id为btn03的按钮绑定一个单击响应函数 var btn03 = document.getElementById("btn03"); btn03.onclick = function(){ //查找name=gender的所有节点 var inputs = document.getElementsByName("gender"); for(var i=0 ; i<inputs.length ; i++){ /* * innerHTML用于获取元素内部的HTML代码的 * 对于自结束标签，这个属性没有意义 */ /* * 如果需要读取元素节点属性， * 直接使用 元素.属性名 * 例子：元素.id 元素.name 元素.value * 注意：class属性不能采用这种方式， * 读取class属性时需要使用 元素.className */ alert(inputs[i].className); } }; }; </> |
html中body里的代码：
| <div id="total"> <ul id="city"> <div class="inner"> |
效果：
当然，查询时可以像在CSS中一样根据.class,#id去获得，不过此时用的是
document.querySelector(),document.querySelectorAll()。
8.2、dom对节点增删改
| < type="text/java"> window.onload = function() { //创建一个"广州"节点,添加到#city下 myClick("btn01",function(){ //创建广州节点 <li>广州</li> //创建li元素节点 /* * document.createElement() * 可以用于创建一个元素节点对象， * 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象， * 并将创建好的对象作为返回值返回 */ var li = document.createElement("li"); //创建广州文本节点 /* * document.createTextNode() * 可以用来创建一个文本节点对象 * 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回 */ var gzText = document.createTextNode("广州"); //将gzText设置li的子节点 /* * appendChild() * - 向一个父节点中添加一个新的子节点 * - 用法：父节点.appendChild(子节点); */ li.appendChild(gzText); //获取id为city的节点 var city = document.getElementById("city"); //将广州添加到city下 city.appendChild(li); }); //将"广州"节点插入到#bj前面 myClick("btn02",function(){ //创建一个广州 var li = document.createElement("li"); var gzText = document.createTextNode("广州"); li.appendChild(gzText); //获取id为bj的节点 var bj = document.getElementById("bj"); //获取city var city = document.getElementById("city"); /* * insertBefore() * - 可以在指定的子节点前插入新的子节点 * - 语法： * 父节点.insertBefore(新节点,旧节点); */ city.insertBefore(li , bj); }); //使用"广州"节点替换#bj节点 myClick("btn03",function(){ //创建一个广州 var li = document.createElement("li"); var gzText = document.createTextNode("广州"); li.appendChild(gzText); //获取id为bj的节点 var bj = document.getElementById("bj"); //获取city var city = document.getElementById("city"); /* * replaceChild() * - 可以使用指定的子节点替换已有的子节点 * - 语法：父节点.replaceChild(新节点,旧节点); */ city.replaceChild(li , bj); }); //删除#bj节点 myClick("btn04",function(){ //获取id为bj的节点 var bj = document.getElementById("bj"); //获取city var city = document.getElementById("city"); /* * removeChild() * - 可以删除一个子节点 * - 语法：父节点.removeChild(子节点); * * 子节点.parentNode.removeChild(子节点); */ //city.removeChild(bj); bj.parentNode.removeChild(bj); }); //读取#city内的HTML代码 myClick("btn05",function(){ //获取city var city = document.getElementById("city"); alert(city.innerHTML); }); //设置#bj内的HTML代码 myClick("btn06" , function(){ //获取bj var bj = document.getElementById("bj"); bj.innerHTML = "昌平"; }); myClick("btn07",function(){ //向city中添加广州 var city = document.getElementById("city"); /* * 使用innerHTML也可以完成DOM的增删改的相关操作 * 一般我们会两种方式结合使用 */ //city.innerHTML += "<li>广州</li>"; //创建一个li var li = document.createElement("li"); //向li中设置文本 li.innerHTML = "广州"; //将li添加到city中 city.appendChild(li); }); }; function myClick(idStr, fun) { var btn = document.getElementById(idStr); btn.onclick = fun; } </> |
body中的代码：
| <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> </div> </div> <div id="btnList"> <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div> <div><button id="btn02">将"广州"节点插入到#bj前面</button></div> <div><button id="btn03">使用"广州"节点替换#bj节点</button></div> <div><button id="btn04">删除#bj节点</button></div> <div><button id="btn05">读取#city内的HTML代码</button></div> <div><button id="btn06">设置#bj内的HTML代码</button></div> <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div> </div> |
效果：
8.3、dom操作CSS
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> < type="text/java"> window.onload = function(){ /* * 点击按钮以后，修改box1的大小 */ //获取box1 var box1 = document.getElementById("box1"); //为按钮绑定单击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ //修改box1的宽度 /* * 通过JS修改元素的样式： * 语法：元素.style.样式名 = 样式值 * 注意：如果CSS的样式名中含有-， * 这种名称在JS中是不合法的比如background-color * 需要将这种样式名修改为驼峰命名法， * 去掉-，然后将-后的字母大写 * 我们通过style属性设置的样式都是内联样式， * 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示 * 但是如果在样式中写了!important，则此时样式会有最高的优先级， * 即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效 * 所以尽量不要为样式添加!important */ box1.style.width = "300px"; box1.style.height = "300px"; box1.style.backgroundColor = "yellow"; }; //点击按钮2以后，读取元素的样式 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ //读取box1的样式 /* * 语法：元素.style.样式名 * 通过style属性设置和读取的都是内联样式 * 无法读取样式表中的样式 */ //alert(box1.style.height); // alert(box1.style.width); var width = getStyle(box1,"width"); alert(width); }; }; function getStyle(obj , name){ //正常浏览器的方式，具有getComputedStyle()方法 //IE8的方式，没有getComputedStyle()方法，只能通过obj.currentStyle[name] return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name]; } </> </head> <body> <button id="btn01">点我一下</button> <button id="btn02">点我一下2</button> <br /><br /> <div id="box1"></div> </body> </html> |
效果：
依次点击两个按钮：
5172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
