白学的小知识[DOM对象]

Chen-HaHa

已于 2024-05-05 20:26:15 修改

阅读量1.2k

点赞数 30

文章标签： javascript

于 2024-05-05 20:24:49 首次发布

本文链接：https://blog.csdn.net/c_made_c/article/details/138472810

版权

一、 DOM 分类

核心DOM	是提供了操作HTML和XML文档的各种属性，定义了一些公共的属性和方法
XML DOM	针对XML操作的接口，也是一些属性和方法
HTML DOM	针对HTML文档操作的接口，也是一些属性和方法
Event DOM	事件对象模型，提供了一些常用的事件。比如：onclick、onload、onchange
CSS DOM	让JS去操作和访问CSS的各种属性

二、 Document 对象：

title 属性操作当前文档的标题。

function getTitle(){
alert(document.title);
}
function setTitle(){
document.title = "设置标题";
}

URL 属性返回当前文档的 URL。

function getUrl(){
alert(document.URL);
}

write() 方法向文档写文本、 HTML 表达式或 JavaScript 代码

document.write("我是一个兵<br/>");

三、 DOM 操作之节点操作

整个文档是一个文档节点 (Document)

每个 HTML 标签是一个元素节点 (Element)

每一个 HTML 属性是一个属性节点 (Attribute) 是指元素中所有的属性构成的节点列表 , 一个标记有多个属

性。

包含在 HTML 元素中的文本是文本节点 (Text) 是最底层的节点，它下面不能再有其它子节点。 .

一个HTML文档，只有一个根元素，就是<html>标记
父节点(parentNode)：当前节点的上一级元素；
子节点(childNode)：当前节点的下一级元素；
兄弟节点：相邻的两个节点，同属于一个父节点。
如： <html>
<head>
<title>文档标题</title>
</head>
<body>
<h1>我的标题</h1>
<a href="http://www.baidu.com">我的链接</a>
</body>
</html>

1 、获取节点 (dom 对象的方法和属性 )

获取节点 (js 方式获取 DOM 节点 ) 获取 html 中的标签元素

定位到 html 元素

document.getElementById(); 返回单个 DOM 元素节点

document.getElementsByName(); 返回多个元素根据 name 属性值

document.getElementsByTagName(); 返回多个元素根据标签名

document.querySelectorAll(); 返回多个元素根据选择器 ( 可以是基本选择器，还可以是其它选

择器 )

注意： 后面三个是返回节点数组，注意使用方法.

<div id="box">hello NodeType!~</div>
<ul id="nav">
first list
<li id="testli" name="listlist">列表01</li>
<li id="testlist">列表02</li>
<li>列表03</li>
<li>列表04</li>
best list
</ul>

//元素节点
var element1=document.getElementById("box");
alert(element1);
var element2=document.querySelectorAll("#box")[0];
alert(element2);

设置或获取节点的属性值

dom 元素 . 属性 ( 只能是标准属性 )

设置或获取标签的文本内容

dom 元素 .innerText

设置或获取标签的文本内容 ( 识别标签 )

dom 元素 .innerHTML

案例一：设置、查看 src 属性

<img src="img/logo.png" id="img"/>
<button onclick="getAttr();">查看属性</button>

function getAttr(){
var img=document.getElementById("img");
alert(img.src);
alert(img.id);
}

// 修改 src 属性

img.src="img/mai.png";

<button onclick="setAttr();">设置属性</button>

function setAttr(){
//元素节点
var element1=document.getElementById("img");
element1.src = "../img/mai.jpg";
}

案例二： innerText innerHtml 方式区别

function setIText(){
var tag = "<p>这是一个段落 </p>";
var objNode = document.getElementById("nav");
objNode.innerText = tag;
}
function setIHtml(){
var tag = "<p>这是一个段落 </p>";
var objNode = document.getElementById("nav");
objNode.innerHTML = tag;
}

综合练习：全选

<input type="checkbox" name="all" onclick="checkAll(this)"/>全选<br/>
<input type="checkbox" name="child" onclick="checkChild()"/>子<br />
<input type="checkbox" name="child" onclick="checkChild()"/>子<br />
<input type="checkbox" name="child" onclick="checkChild()"/>子<br />
<input type="checkbox" name="child" onclick="checkChild()"/>子<br />

function checkAll(){
// 或 父复选框 的选中情况 true|false
// flag true选中 false 未选中
var flag=document.getElementsByName("all")[0].checked;
//获取 所有的子 复选框
var childNode=document.getElementsByName("child");
for(var i=0;i<childNode.length;i++){
childNode[i].checked=flag;
}
}

//子复选框去计算父复选框是否被选中 思考
function checkChild(){
//获取 子复选框的个数
var childNode=document.getElementsByName("child");
var len=childNode.length;
//判断子复选框 选中的个数
var count=0;
for(var i=0;i<childNode.length;i++){
//子复选框被选中
if(childNode[i].checked==true){
count++;
}
}
//if(子复选框 全选中){父复选框 选中}else{不选中}
//或父复选框 的节点
var allNode=document.getElementsByName("all")[0];
if(len==count){
allNode.checked=true;
}else{
allNode.checked=false;
}
}

2 、获取节点的信息

nodeName ：节点名字

nodeValue ：节点值

nodeType ：节点类型

1 element 元素 // 上面有四种取元素节点的方法

2 attr 属性 //getAttributeNode() 方法获取属性节点对象

3 text 文本 // #text 表示名字

8 comments 注释

9 document 文档

<a href="#" id="a1" class="a2" style="color:red;">
a标签
</a>

上例属性有 ( 属性 =" 属性值 ") 如： href id class style

<div id="box">hello NodeType!~</div>
<ul id="nav">
first list
<li id="testli" name="listlist">列表01</li>
<li id="testlist">列表02</li>
<li>列表03</li>
<li>列表04</li>
best list
</ul>

//元素节点
var element1=document.getElementById("box");
var element2=document.querySelectorAll("#box")[0];
document.write(element1.nodeName+"名<br/>");
document.write(element2.nodeName+"名<br/>");
document.write(element1.nodeValue+"值<br/>");//值 为null
document.write(element2.nodeValue+"值<br/>");
document.write(element1.nodeType+"类型<br/>");//1 元素节点
document.write(element2.nodeType+"类型<br/>");//1 元素节点

注意：后面详细学的 getAttributeNode() 方法用来得到属性节点对象，而节点属性方式是操作 ( 设置

与查看 ) 属性值 .

//获取属性节点方法 getAttributeNode()
var
attr1=document.getElementById("nav").getAttributeNode("id");
var attr2=document.getElementById("nav").id;
//用节点属性只能访问与设置属性值 只能操作属性不是返回节点对象,因为他不是一
个对象所以没有节点对象的方法和属性
document.write("节点名字："+attr1.nodeName+"<br />");
document.write("节点名字："+attr2.nodeName+"<br />");
document.write("节点值："+attr1.nodeValue+"<br />");
document.write("节点值："+attr2.nodeValue+"<br />");
document.write("节点类型："+attr1.nodeType+"<br />");
document.write("节点类型："+attr2.nodeType+"<br />");
//获取文本节点
var textNode = document.getElementById("nav").lastChild;
document.write("节点名字"+textNode.nodeName+"<br />");
document.write("节点值"+textNode.nodeValue+"<br />");
document.write("节点类型"+textNode.nodeType);

3 、文档节点层次操作

父节点

上一个层次的节点 parentNode 得到父结点对象（标签）

子节点注意：元素节点间的空格和回车

所有子节点 childNodes 返回的是子节点集合 , 使用子节点时注意数组 childNodes[i]

第一个子节点 firstChild 返回节点的第一个子节点 , 通常用这方法访问该元素的文本节点

最后一个子节点 lastChild 返回节点的最后一个子节点 , 通常用这方法访问该元素的文本节点

兄弟节点

nextSibling 下一个节点（含文本节点）

nextElementSibling 下一个元素节点

previousSibling 上一个节点（含文本节点）

previousElementSibling 上一个元素节点

4 、操作节点

A 、操作节点属性

// 前面介绍方法元素 . 属性名操作元素的属性

setAttribute(" 属性名 "," 属性值 ") 给一个节点增加 / 修改属性值

getAttribute(" 属性名 "); 获取一个属性的值

removeAttribute(" 属性名 "); 删除节点的属性

举例：<img /> img.setAttribute("src","images/bg.gif") 1

B 、节点的创建

元素的节点也可以用前面学的 innerHtml 属性向 html 标签中添加一个标签

document.createElement("");

注意：不要加尖括号

<div id="box">hello NodeType!~</div>
<ul id="nav">
first list
<li id="testli" name="listlist">列表01</li>
<li id="testlist">列表02</li>
<li>列表03</li>
<li>列表04</li>
best list
</ul>

function addNode(){
var objNode = document.createElement("img");
// objNode.src = "img/dog.jpg";//两种操作属性的方式
objNode.setAttribute("src","img/mai.jpg");
var pnode = document.getElementById("nav");
pnode.appendChild(objNode);
}

C 、创建文本节点

document.createTextNode(" 这是我新加的内容 ");

注意：这里只能是纯文本

<button onclick="addTextNode()">创建文本节点</button>

function addTextNode(){
var textNode = document.createTextNode("这是我新加的内容");
var pnode = document.getElementById("nav");
pnode.appendChild(textNode);
}

D 、追加节点

在目标节点的后增加

appendChild(node) ：将一个节点追加到某个父节点中子节点的最后位置。

如： A.appendChild(B); // 在 A 节点的未尾追加子节点 B

E 、插入节点

插入新节点，要确定在父节点中增加的位置，位于哪个子节点之前。

pnode.insertBefore(newNode,currNode);

pnode ：目标父节点 newNode ：新节点 currNode ：哪个子节点之前

如： A.insertBefore(B,C); // 在 A 节点下加入新节点 B, 插入的位置是在 C 节点前面。

<div id="box">hello dom!</div>
<ul id="nav">first list00
<li id="listlist" class="lll" >列表01</li>
<li id="testlist" name="listlist">列表02</li>
<li id="testlistone" name="listlist">列表03</li>
<li id="lll">列表04</li>
<li>列表05</li>添加文本节点06
</ul>

function insertNode(){
//创建元素节点
var newnode = document.createElement("img");
newnode.setAttribute("src","img/taiyang.png");
var currNode = document.getElementById("testlistone");
var pnode = document.getElementById("nav");
pnode.insertBefore(newnode,currNode);
}

F 、复制节点

cloneNode(true|false); // 复制节点 true 完全复制 false 节点本身不含子节点

注意：复制的元素节点如果节点含 id 属性必须修改

案例：

<div id="box">hello NodeType!~</div>
<ul id="nav">
first list
<li id="testli" name="listlist">列表01</li>
<li id="testlist">列表02</li>
<li>列表03</li>
<li>列表04</li>
best list
</ul>

//插入复制节点
function copyInsert(){
var pnode = document.getElementById("nav");
var copyNode = pnode.cloneNode(true);//完全复制
var inode = document.getElementById("listlist");//确定哪个节点之前
pnode.insertBefore(copyNode,inode);
}

G 、删除节点

用来删除父节点中的一个子节点

pnode.removeChild(delNode); // 移除子节点

delNode ：要删除的目标子节点

<button onclick="delNode()">删除节点</button>

//删除节点
function delNode(){
var pnode = document.getElementById("nav");//确定父节点
var delNode = document.getElementById("listlist");//确定删除的
节点
pnode.removeChild(delNode);//移除子节点
}

H 、替换节点

用新节点替换某个子节点

pNode.replaceChild(newNode,oldNode); // 替换节点

//替换节点
function repNode(){
var pNode = document.getElementById("nav");//确定父节点
var oldNode = document.getElementById("listlist");
var newNode = document.createElement("li");//创建节点
newNode.innerHTML = "这是新的标准标记";
pNode.replaceChild(newNode,oldNode);//替换节点
}

5 、节点样式

每一个 HTML 标签都有一个叫 style 属性，它对应元素对象 style ，该对象的属性与 CSS 中的属性名字一

一对应。

A 、行内样式

语法：目标结点 .style.cssText = " 行内样式 "

目标结点 .style = " 行内样式 " 兼容性不好

注意：该方式操作行内样式如果没有设置过，不可读取，哪怕有默认样式也不行。

ps ：任何操作样式方法均可使用 getComputedStyle() 方法取层叠计算后的样式对象

如： var widthTest = getComputedStyle( 目标节点， null).width;

B 、类样式

语法：目标结点 .className = " 类样式 ";

注意：对于 class 属性必须使用 clasName 属性名，因为 class 的保留字。

<style type="text/css">
.testStyle{
color: red;
font-size: 30px;
background-color: paleturquoise;
}
</style>

<button onclick="inStyle();"> 行内样式</button>
<button onclick="classStyle();">类样式</button>
<script>
function classStyle(){
var objNode = document.getElementById("nav");
objNode.className = "testStyle";
}
function inStyle(){
//目标节点
var objNode = document.getElementById("box");
//inStyle style="color: red;font-size: 30px;"
//objNode.style = "color: red;font-size: 30px;";
objNode.style.color = "red";
objNode.style.fontSize = "30px";
objNode.style.backgroundColor = "burlywood";
}

.testStyle{
color: red;
font-size: 30px;
}
<p id="text">文本内容</p>
行内样式
var text = document.getElementById("text");
text.style = "color:red;";
类样式
var text = document.getElementById("text");
text.className="testStyle";

6 、 this 关键字

this 做为实参传入函数中， this 指的是当前的节点

<input type="checkbox" name="all" onclick="checkAll(this)"/>全选<br />

//全选按钮
function checkAll(x){
// 或 父复选框 的选中情况 true|false
// flag true选中 false 未选中
var flag=x.checked;
//获取 所有的子 复选框
var childNode=document.getElementsByName("child");
for(var i=0;i<childNode.length;i++){
childNode[i].checked=flag;
}
}

Chen-HaHa

关注

30
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
白学的小知识[DOM对象]

插入新节点，要确定在父节点中增加的位置，位于哪个子节点之前。：将一个节点追加到某个父节点中子节点的最后位置。方法用来得到属性节点对象，而节点属性方式是操作。是最底层的节点，它下面不能再有其它子节点。文档的各种属性，定义了一些公共的属性和方法。子节点注意：元素节点间的空格和回车。文档操作的接口，也是一些属性和方法。是指元素中所有的属性构成的节点列表。通常用这方法访问该元素的文本节点。注意：复制的元素节点如果节点含。操作的接口，也是一些属性和方法。用来删除父节点中的一个子节点。
复制链接

扫一扫