JavaScript基础（三）

最新推荐文章于 2022-10-13 10:59:24 发布
最新推荐文章于 2022-10-13 10:59:24 发布
阅读量144 收藏
点赞数
分类专栏： JavaScript JavaWeb 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43958460/article/details/94360325
版权

JavaScript对DOM的操作（一）

关于DOM

DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路。
比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。
DOM把所有的html都转换为节点
整个文档 是一个节点
元素 是节点
元素属性 是节点
元素内容 是节点
注释 也是节点
在这里插入图片描述
比如：通过document.getElementById获取了id=d1的div标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过childNodes获取了内容节点

<html>
<body>
<div id="d1">hello HTML DOM</div>
</body>
  
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>

</html>
  • 运行显示：
    hello HTML DOM
    文档节点[object HTMLDocument]
    元素[object HTMLDivElement]
    属性节点[object Attr]
    内容节点[object Text]

获取文档节点

通过ID获取元素节点

在设计html的时候，一个元素对应的id应该是唯一的。
可以通过document.getElementById 获取某个元素对应的元素节点对象：

<html>
<div id="d1">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
document.write(div1);//[object HTMLDivElement]
</script>
</html>

通过标签名称获取元素节点

所有的元素都有标签名 ，通过 getElementsByTagName 根据标签名称获取一个元素数组。

<html>
<body>
	<div>
	    hello html
	</div>
	<script>
	    var title = document.getElementsByTagName("div");
	    document.write(title[0]);//因为获取到的是一个数组,所以需要角标索引，结果为：[object HTMLDivElement]
		docment.write(title[1]);//结果为：undefined
	</script>
</body>
</html>

通过类名获取元素节点

与 getElementsByTagName 类似的，也可以通过 getElementsByClassName 根据class返回一个节点数组。

<html>
<h1  class="d" >hello DOM</h1>
<script>
var  elements= document.getElementsByClassName("d");
  document.write(elements[0]);//[object HTMLHeadingElement]
</script>
</html>

通过表单元素的name获取元素节点

表单元素都有name属性，通过getElementsByName可以根据name属性的值，获取元素节点。

<html>
用户名 <input name="userName"> <br>
密码  <input name="userPassword">
<br>
<script>
var  element= document.getElementsByName("userName");//结果为：[object HTMLInputElement]
</script>
</html>

获取属性节点

属性节点属于元素的，要获取属性节点就需要先获取元素节点，然后通过attributes来获取属性节点，会返回一个数组。

<html>
<p id="igor" class="lover" align="center">hello JavaScript</p>
<script>
    var tyler = document.getElementById("igor").attributes;
    document.write("标签P中有"+tyler.length+"个属性,分别是：");
    for (var i = 0;i<tyler.length;i++){
        document.write("<br>");
        document.write(tyler[i].nodeName);//nodeName为节点名称
        document.write(":");
        document.write(tyler[i].nodeValue);//nodeValue为节点值
    }
    document.write("<br>");
    document.write("div的id属性值是："+ tyler["id"].nodeValue);
</script>
</html>
  • 结果如图：
    在这里插入图片描述

获取子节点

要获取子节点就需要先拿到元素节点对象，然后通过childNodes获取子节点对象，返回值是节点对象数组。还可以通过fristChild，获取第一个子节点；parentNode获取父节点对象；nextSibling获取下一个节点对象；previousSibling上一个节点对象等。

<html>
<ul id="NodeList">
    <li>AAAAAA</li>
    <li>BBBBBB</li>
    <li>BBBBBB</li>
</ul>
<script>
var res = document.getElementById("NodeList").childNodes;
for (var i = 0;i<res.length;i++){
        document.write("<br/>");
        document.write(res[i]);
    }
</script>
</html>

结果如下：
在这里插入图片描述

<html>
<ul id="NodeList">
    <li>AAAAAA</li>
    <li>BBBBBB</li>
    <li>BBBBBB</li>
</ul>
<script>
var res = document.getElementById("NodeList").firstChild;
document.write(res);//结果为：[object Text]
document.write(res.nextSibling);//结果为：[object HTMLLIElement]
document.write(res.nextSibling.previousSibling);//结果为：[object Text]
document.write(res.nextSibling.parentNode);//结果为：[object HTMLUListElement]
</script>
</html>

DOM节点的属性

节点名称nodeName

<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document的节点名称:"+document.nodeName);//document.nodeName：文档的节点名，是固定的#document
p("div元素节点的节点名称:"+div1.nodeName);//div1.nodeName：元素的节点名，是对应的标签名 div
p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);//div1.attributes[0].nodeName：属性的节点名，是对应的属性名 id
p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);//div1.childNodes[0].nodeName：内容的节点名，是固定的 #text
</script>
</html>

节点值nodeValue

<html>   
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document是没有nodeValue的："+document.nodeValue);//document.nodeValue:文档的节点值，是 null
p("元素节点是没有nodeValue的："+div1.nodeValue);//div1.nodeValue:元素的节点值，是null
p("属性节点id的nodeValue："+div1.attributes[0].nodeValue);//div1.attributes[0].nodeValue:属性的节点值，是对应的属性值 d1
p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);//div1.childNodes[0].nodeValue:内容的节点值，是内容 即： #text
</script>
</html>

节点类型nodeType

不同的节点类型，对应的节点类型值是不一样的,如下图：

在这里插入图片描述

<html>  
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document的nodeType是："+document.nodeType);//document.nodeType:文档的节点类型，是 9
p("元素节点的nodeType是："+div1.nodeType);//div1.nodeType:元素的节点类型，是 1
p("属性节点的nodeType是："+div1.attributes[0].nodeType);//div1.attributes[0].nodeType:属性的节点类型，是 2
p("内容节点的nodeType是："+div1.childNodes[0].nodeType);//div1.childNodes[0].nodeType:内容的节点类型，是 3
</script>
</html>

元素的文本内容innerHTML

innerHTML与nodeValue差不多，都可以获取或改变节点的文本，只是用法上存在差异：

<html>
<div id="d1">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
document.write(div1.innerHTML);//hello HTML DOM
document.write(div1.childNodes[0].nodeValue);//同上
</script>
</html>
嗯冲！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html object上层加div,JS详解[Object HTMLDivElement]和[Object Object]
weixin_35664081的博客
06-10 1143
【JS】☆★之详解[Object HTMLDivElement]和[Object Object]htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档$(function(){vartemp=$(".one");/...
JavaScript入门--08
sinat_50855580的博客
11-21 121
JavaScript_8 1.DOM对象 DOM–Document Object Model[文档对象模型] 当网页被加载时，浏览器会创建页面的文档对象模型。 HTML DOM 模型被构造为对象的树 2.DOM可以完成的功能 1.JavaScript 能够改变页面中的所有 HTML 元素 2.JavaScript 能够改变页面中的所有 HTML 属性 3.JavaScript 能够改变页面中的所有 CSS 样式 4.JavaScript 能够对页面中的所有事件做出反应 3. 查找 HTML 元素 为了
JS学习笔记-DOM
weixin_45636381的博客
01-26 150
一、DOM DOM：Document Object Model 文档对象模型 2.浏览器已经为我们提供了文档节点，对象这个是window属性，可以在页面中直接使用，文档节点代表的是整个网页。 console.log(document) //[object HTMLDocument] 3.获取button对象 <button id="btn">按钮</button> var btn=document.getElementById("btn"); 4.修改按钮的文字 //获取
前端基础之《JavaScript（6）—JS DOM对象》
csj50的专栏
10-13 566
document.documentElement //html标签。obj.textContent //获取元素标签内的text内容。obj.innerHTML //获取元素标签内的html内容。obj.outerHTML //获取元素标签外的html内容。obj.tagName //获取元素对象的标签名。document //文档流。一、已经用过的js dom对象。二、获取元素对象方法。三、元素对象常用属性。因为点不包含很多属性。
关于网页显示[object HTML标签名Element]的问题
qq_44960253的博客
06-21 3674
关于网页显示[object HTML标签名Element]的问题 今天学习在 JS红宝书上的 10.1.8 节关于 DocumentFragment 类型时，按照实例，大致上敲了一遍代码想要看看效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
JavaScript 基础问答三
10-30
### JavaScript基础问答三 #### 9. JavaScript 的注释使用方法 **问题**: 如何在JavaScript代码中插入注释？ **解答**: JavaScript 支持三种不同类型的注释方式： 1. **多行 C 风格注释**: - 这种注释通过 `/*`...
JavaScript基础语法笔记
最新发布
04-12
三、JavaScript基础语法 1. 变量声明：JavaScript使用`var`, `let`或`const`来声明变量。`var`在函数作用域内，而`let`和`const`在块级作用域内，其中`const`声明的是常量，不能重新赋值。 2. 函数：JavaScript的...
javaScript基础详解
10-20
本文主要介绍JavaScript的基础知识点，包括其基本语法、作用域、内置对象、函数、事件处理和数据类型等。 首先，JavaScript可以放置在HTML文档的多个位置，通常是放在`<head>`标签或者`<body>`标签内，也可以在页面...
全栈必备JavaScript基础
02-25
在今年RedMonk推出的2017年第一季度编程语言排行榜中，JavaScript排第一，Java第二，Python反超PHP排第三，PHP第四，C#和C++并列第五。RedMonk排名的主要依旧是各种编程语言在StackOverflow和GitHub上的表现，比如...
JS详解[Object HTMLDivElement]和[Object Object]
weixin_33737134的博客
06-16 1641
【JS】☆★之详解[Object HTMLDivElement]和[Object Object]<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmln...
html dom object对象,HTML DOM (document对象)
weixin_31755877的博客
06-18 459
HTML DOM 可通过 JavaScript 进行访问。Document 对象可以对 HTML 页面中的所有元素进行访问。document对象属性属性描述head提供对 元素的直接访问。document.headbody提供对 元素的直接访问。document.bodycookie设置或返回与当前文档有关的所有 cookie。document.cookiedomain返回当前文档的域名。d...
jQuery Object 和 Html Element之间的互换
只在朝暮间的博客
06-14 2062
代码如下:var elm = document.createElement("div"); var jelm = $(elm);//convert to jQuery Element var htmlElm = jelm[0];//convert to HTML Element
关于js中出现获取input框的值为[object HTMLInputElement]的问题
热门推荐
编程界的一名小学生
11-03 3万+
今天遇到一个小问题  用$("#Id").val();获取到得值是[object HTMLInputElement]，看了半天没明白，上百度上找也没看懂都说的什么，回过头来又研究  原来是我用来接收的那个字段没定义 写下来  以后记住，   还有一种情况也会引起这个问题  比如id写错地方了  写在div上或者网上说的id重复了  等   像这种问题得细心细心再细心
网页弹出[Object HTMLDivElement]，怎么取值？
weixin_30340745的博客
01-21 6924
使用innerHTML方法，可以得到文本值 转载于:https://www.cnblogs.com/yang-xiansen/p/10298737.html
javascript初探（三）------DOM
chucksun0426的博客
03-04 156
目录一、概述二、获取元素 一、概述 DOM：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model） HTML DOM 模型被构造为对象的树 二、获取元素 通过 id获取元素：let x=document.getElementById("btn");，如<button id="btn">按钮</button>，精确查找 通过标签名查找：let x_list=document.getElementsByTagName("div");，如<d
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值