document对象(DOM)–认识DOM

document对象(DOM)–认识DOMdocument对象(DOM)–认识DOM文档对象模型DOM(DocumentObjectModel)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。HTML文档可以说由节点构成的集合,DOM节点有:1.元素节点:<html>、<body>、<p>等都是元素节点,即标签。2.文本节…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

document对象(DOM)–认识DOM

文档对象模型DOM(Document Object Model)定义访问和处理 HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文 本的树结构(节点树)。

HTML文档可以说由节点构成的集合,DOM节点有:

1. 元素节点:<html>、<body>、<p>等都是元素节点,即标 签。

2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、 DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="https://www.bai du.com"。

节点属性:

属性 说明
nodeName 返回一个字符串,其内容是给定节点的名字
nodeType 返回一个整数,这个数值代表节点的类型
nodeValue 返回给定节点的当前值

遍历节点树:

方法 说明
childNodes 返回一个数组,这个数组又指定元素节点的子节点构成
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
parentNode 返回一个给定节点的父节点
nextSibling 返回给定节点的下一个节点 (兄弟节点)
prevousSibling 返回给定节点的上一个节点(兄弟节点)
   <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript"> window.onload = function(){ 
 // 1.1 通过ID获取元素对象 document.getElementById("icon").style.color = "red"; // 1.2 通过指定名称 获取节点对象的集合 var name = document.getElementsByName("baidu"); console.log(name.length) name[0].style.color = "pink" // 1.3 通过指定标签名的 节点对象的集合 var tag = document.getElementsByTagName("a") console.log(tag.length) tag[1].style.color = "green" // 1.4 通过类名的 节点对象的集合 var class_name = document.getElementsByClassName("class_a"); console.log(class_name.length) class_name[2].style.color = "aqua" //2.1 通过innerHTML 获取或替换HTML的内容 var inner = document.getElementById("inner"); console.log(inner.innerHTML) inner.innerHTML = "<p>new innerHTML</p>" console.log(inner.innerHTML) console.log(inner.innerText) inner.innerText = "innerText" console.log(inner.innerText) //2.3 改变HTML的样式 var changeStyle = document.getElementById("changeStyle") changeStyle.style.color = "red"; changeStyle.style.height = "100px"; changeStyle.style.width = "400px"; changeStyle.style.backgroundColor = "peachpuff"; changeStyle.style.fontSize = "30px"; changeStyle.style.borderRadius = "50px"; changeStyle.style.textAlign = "center"; changeStyle.style.lineHeight = "100px"; //2.9 访问节点 var ul_childnodes = document.getElementById("ul") //console.log(ul_childnodes.childNodes) //ul 的所有子节点 // id = "ul" 的节点名称 为ul ,节点类型为1(元素) console.log("访问节点 ul") console.log(ul_childnodes.nodeName) // ul节点名称 console.log(ul_childnodes.nodeType) // ul节点类型 console.log(ul_childnodes.nodeValue) // 此结果为null console.log(ul_childnodes) // 打印ul的内容 // 访问 ul 的子节点 console.log("访问 ul 的子节点") console.log(ul_childnodes.firstChild) //第一个子节点 console.log(ul_childnodes.lastChild) //最后一个子节点 console.log(ul_childnodes.childNodes) //所有子节点 console.log(ul_childnodes.childNodes[1].nodeType) //ul 下的第二个节点类型 console.log(ul_childnodes.childNodes.length)//子节点个数 console.log(ul_childnodes.childNodes[1].nodeValue) //访问 ul 的父节点 console.log("访问 ul 的父节点") console.log(ul_childnodes.parentNode) console.log(ul_childnodes.parentNode.nodeName) console.log(ul_childnodes.parentNode.nodeType) console.log(ul_childnodes.parentNode.nodeValue) console.log(ul_childnodes.parentNode.parentNode) console.log(ul_childnodes.parentNode.parentNode.parentNode) //访问 ul 里的 li 的兄弟节点 console.log("访问 ul 里的 li 的兄弟节点") console.log(ul_childnodes.childNodes) console.log(ul_childnodes.childNodes[1].nextSibling) console.log(ul_childnodes.childNodes[1].nextSibling.nodeName) console.log(ul_childnodes.childNodes[1].previousSibling) var x = document.getElementsByTagName("li")[0] console.log(x.nodeName) //找到li 的节点类型为1的兄弟节点. var y = get_nextSibling(x) console.log("找到li 的节点类型为1的兄弟节点: "+y.nodeType) // 创建元素节点createElement() ,将其添加到 ul 中 var input = document.createElement("input") input.type = "button" input.value = "创建了一个按钮" ul_childnodes.appendChild(input) //也可以用setAttribute来设置属性 var input2 = document.createElement("input") input2.setAttribute("type","button") input2.setAttribute("value","利用setsetAttribute创建的按钮") input2.setAttribute("onclick","javascript:alert('创建又一个按钮');") ul_childnodes.appendChild(input2) //appendChild(newnode) 在指定节点的最后一个子节点列表之后添加一个新的子节点。 //创建文本节点 createTextNode() (先创建一个元素节点,再在元素节点里添加文本节点) var div = document.createElement("div") div.setAttribute("className","name"); var text = document.createTextNode("hello 我是新创建的文本节点") div.appendChild(text) //insertBefore() 方法可在已有的子节点前插入一个新的子节点。 //insertBefore(newnode,node); //ul_childnodes.appendChild(div) first = ul_childnodes.childNodes[2] ul_childnodes.insertBefore(div,first) console.log(div) console.log(div.getAttribute("className")) console.log(ul_childnodes) //删除节点removeChild() --从子节点列表中删除某个节点 var nei = ul_childnodes.removeChild(ul_childnodes.childNodes[1]) console.log(ul_childnodes) console.log(ul_childnodes.childNodes[0]) //替换 console.log(ul_childnodes.childNodes[3]) ul_childnodes.replaceChild(ul_childnodes.childNodes[5],ul_childnodes.childNodes[3]) } function get_nextSibling(n){ 
 var x = n.nextSibling; while(x.nodeType != 1){ 
 console.log(x.nodeName) console.log(x.nodeType) x = x.nextSibling } return x; } function Hidden(){ 
 var changeStyle = document.getElementById("changeStyle") changeStyle.style.display = "none" } function show(){ 
 var changeStyle = document.getElementById("changeStyle") changeStyle.style.display = "block" } function changeClass(){ 
 //控制类名(className属性) var one = document.getElementById("one") console.log("控制类名,中id 为 one 的class值为: "+one.className) one.className = "xiugai" console.log("控制类名,修改后 的class值为: "+one.className) } function reset(){ 
 //控制类名(className属性) var one = document.getElementById("one") one.className = "name" console.log("控制类名,复原后 的class值为: "+one.className) } function haveAttribute(){ 
 //2.6 getAttribute()方法 通过元素节点的属性名称获取属性的值。 var getA = document.getElementById("one") console.log(getA.getAttribute("class")) // setAttribute()方法 getA.setAttribute("title","增加") console.log(getA.getAttribute("width")) console.log(getA.getAttribute("title")) } </script>
</head>
<body>
<!-- 1. 获取元素 -->
<!-- 1.1 通过ID获取元素 -->
<div id="icon">
1.1 通过ID获取元素
</div>
<!-- 1.2 通过name过去 -- 指定名称节点对象 || 指定标签 -->
<div class="name" id="one" width="500px">
<a name="baidu" class="class_a" href="https://www.baidu.com">百度</a>
<a name="baidu" class="class_a" href="https://www.baidu.com">百度</a>
<a name="baidu" class="class_a" href="https://www.baidu.com">百度</a>
<button type="button" onclick="changeClass()">修改类名</button>
<button type="button" onclick="reset()">复原</button>
<button type="button" onclick = "haveAttribute()">获取属性值</button>
</div>
<!-- 2.1 通过innerHTML 获取或替换HTML的内容 语法: Object.innerHTML Object 为获取元素的对象,所以需要通过ID。 -->
<div id="inner">
<h1 class="in">innerHTML</h1>
</div>
<!-- 2.3 改变HTML的样式 -->
<div id="changeStyle">
2.3 改变HTML的样式
</div>
<!-- 2.4 隐藏 和 显示 -->
<button type="button" onclick="Hidden()">隐藏</button>
<button type="button" onclick="show()">显示</button>
<!-- 2.8 访问节点 -->
<div class="jiedian">
<ul id="ul">
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
</ul>
</div>
</body>
<!-- <script type="text/javascript"> document.getElementById("icon").style.color="red"; </script> -->
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194889.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 如何将excel中的数据导入mysql_将外部sql文件导入MySQL步骤

    如何将excel中的数据导入mysql_将外部sql文件导入MySQL步骤客户准备了一些数据存放在excel中,让我们导入到mysql中。先上来我自己把数据拷贝到了txt文件中,自己解析txt文件,用JDBC循环插入到数据库中。后来发现有更简单的方法:1先把数据拷贝到txt文件中2打开mysql命令行执行下面的命令就行了LOADDATALOCALINFILE’C:\\temp\\yourfile.txt’INTOTA…

  • 重拾 java helloworld

    重拾 java helloworld

  • oracle触发器实例

    oracle触发器实例最近有一个需求,一个数据库的表在插入和删除的时候另外一个数据库中的表也做相应的操作。我的想法是1.首先两个数据库可以连接,通过dblink可以解决。2.建立插入和删除才能触发的触发器。直接上代码createorreplacetriggersynch_useridafterinsertordeleteoneosoperatorFOREACHROW–每一行触发一次…

  • c花体复制_花体

    c花体复制_花体路由器之家网今天精心准备的是《花体》,下面是详解!26个英文字母花体和圆体写法最好是大小写都有,要图片…最好是大小写都有,要图片26个花体和圆体英文字母如下1、圆体“圆体英文”是国内的一种说法,国外并没有与“圆体”相关的英文单词。国内常指代的圆体英文书法包括有手写印刷体、意大利体(或者意大利斜体、斜体)、圆体(国产圆体)这种字体简单易懂,写出来很好,是现在国内外常用的日常手写字体。普通的钢…

  • Vue 定时器/定时调用

    Vue 定时器/定时调用前端定时器;定时调用方法;间隔重复调用

    2022年10月29日
  • 学js培训课程_java前端培训班

    学js培训课程_java前端培训班华苏javascript培训@author:zhoujiaping@date:2017-08-01一目的使开发人员对javascript语言有较深入的理解,提升开发人员的js功底,在以后的项目中更准确、高效的使用js,编写出高质量的js程序。二解释型动态类型弱类型多范式语言2.1语言按各种方法可以分为各种类型,按编译执行过程,可以分为编译型语言和解释型语言。…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号