DOM

最新推荐文章于 2021-06-08 10:24:53 发布
最新推荐文章于 2021-06-08 10:24:53 发布
阅读量98 收藏
点赞数
分类专栏： WEB前端 文章标签： js javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gy99csdn/article/details/113862141
版权

DOM

1.概念

文档对象模型(document object model )
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：DOM Tree
在这里插入图片描述

2.DOM加载顺序(html从代码–>真正显示)

  1. 解析HTML结构(从上向下的过程)
  2. 加载外部脚本和样式表文件
  3. 解析并执行脚本代码
  4. 构造HTML DOM模型
  5. 加载图片等外部文件
  6. 页面加载完毕

3.节点

dom树中的节点彼此拥有层级关系(由节点构成)

  1. 整个文档是一个文档节点
  2. 每个 HTML 元素是元素节点
  3. HTML 元素内的文本是文本节点
  4. 每个 HTML 属性是属性节点
  5. 注释是注释节点
  6. 在节点树中，顶端节点被称为根（root）
  7. 每个节点都有父节点、除了根（它没有父节点）
  8. 一个节点可拥有任意数量的子节点
  9. 父、子 和同胞(兄弟或姐妹）节点。
  10. 同胞是拥有相同父节点的节点

4.document方法和属性

获得节点的常用方法

  • getElementById()：通过id属性获得节点
  • 例1：
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
例2：点解图片，换位另外一张
在这里插入图片描述
点击前：
在这里插入图片描述
点击后：
在这里插入图片描述

  • getElementsByName()：通过name属性获得节点
    在这里插入图片描述

  • getElementsByTagName()：通过标签名获得节点
    在这里插入图片描述

5.Element 对象

  • Element 对象表示 HTML 元素(节点)对象
  • Element 对象是拥有类型为元素节点、文本节点、注释节点等子节点的节点(标签)
  • 部分方法
    element.appendChild()向元素添加新的子节点，作为最后一个子节点
    例0：（简洁版）
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<input id="input"> 
<button onclick="myFunction()">添加</button>
<script>
function myFunction(){
  var node=document.createElement("LI");
  var input=document.getElementById("input")
  var textnode=document.createTextNode(input.value);
  node.appendChild(textnode);
  document.getElementById("myList").appendChild(node);
}
</script>

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

例1：（注释详细）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="ul1">
    <li>大娃</li>
    <li>二娃</li>
    <li>三娃</li>
    <li>四娃</li>
    <li>五娃</li>
</ul>
<input id="inputstr"><button onclick="add()">添加</button>

<script>
   function add() {
       //获得input这个节点
       var inputNode=document.getElementById('inputstr')
       //用户的输入值
       var inputValue=inputNode.value
       //根据用户输入的值，创建一个文本节点
       var textNode=document.createTextNode(inputValue)
       //创建一个节点（创建一个li节点）
       var liNode=document.createElement("li");//li就是要创建目标节点的标签名

       //给li节点添加一个子文本节点
       liNode.appendChild(textNode)

       //获得input这个节点（待改造的对象）
       var ulNode=document.getElementById("ul1")
     
       //给ul这个节点添加一个新的孩子，newChild
       ulNode.appendChild(liNode)

       //给input这个节点的value置空
       inputNode.value=""
   }
</script>
</body>
</html>

结果阶段a:
在这里插入图片描述
结果阶段b:
在这里插入图片描述
例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="z">
    待添加：
</button>
<input id="inputstr"><button onclick="add()">添加</button>

<script>
   function add() {
       //获得input这个节点
       var inputNode=document.getElementById('inputstr')
       //用户的输入值
       var inputValue=inputNode.value
       //根据用户输入的值，创建一个文本节点
       var textNode=document.createTextNode(inputValue)
       //创建一个节点（创建一个button节点）
       var newbuttonNode=document.createElement("button")
       //给button节点添加一个子文本节点
       newbuttonNode.appendChild(textNode)
       //获得input这个节点
       var buttonNode=document.getElementById("z")
       //给ul这个节点添加一个新的孩子，newChild
       buttonNode.appendChild(newbuttonNode)

       //给input这个节点的value置空
       inputNode.value=""
   }
</script>
</body>
</html>

结果阶段a：
在这里插入图片描述
结果阶段b：
在这里插入图片描述

element.removeChild():从元素中移除子节点（输入指定位置删除）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="myList">
    <li>Coffee</li>
    <li>Tea</li><li>Milk</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
节点位置:<input id="input">
<button onclick="myFunction()">删除</button>
<script>
    function myFunction(){
        //获得id名为input的input节点
        var input=document.getElementById("input")
        //获得id名为myList的List节点
        var list=document.getElementById("myList");
        //list.childNode获得list的所有节点，获得输入对象input的位置值input.value
        list.removeChild(list.childNodes[input.value]);
    }
</script>
</body>
</html>

结果阶段a：
在这里插入图片描述
结果阶段b：
在这里插入图片描述

element.replaceChild():替换元素中的子节点
Eg1:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="ul1"  >
    <li>zs</li>
    <li>ls</li>
    <li>wu</li>
</ul>

改变位置:<input id="inputtag"><br>
改变内容:<input id="inputstr">
<button onclick="changeli()">改变</button>

<script>
    function changeli() {

        // 获得下标, 以及改变的内容
        var inputTagNode = document.getElementById('inputtag')
        var inputStrNode = document.getElementById('inputstr')

        var liNode = document.createElement('li')
        var textNode = document.createTextNode(inputStrNode.value)
        liNode.appendChild(textNode)

        var ulNode = document.getElementById('ul1')


        // 参数要求:  新节点,  旧结点
        ulNode.replaceChild(liNode , ulNode.childNodes[inputTagNode.value])

    }
</script>
</body>
</html>

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

Eg2:（交换图片）

var inputN=document.getElementById("imgchange")
var img=document.createElement("img");
img.src=“----";
inputN.replaceChild(img,inputN.childNodes[1]);

Element 对象表示 HTML 元素(节点)
Element 对象是拥有类型为元素节点、文本节点、注释节点的子节点
部分方法：
innerText&innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
function changeLink(){
document.getElementById('aaa').innerHTML="<H1>baidu</H1>";
document.getElementById('bbb').innerText="<H1>baidu</H1>";
document.getElementById('aaa').href="http://www.baidu.com";
document.getElementById('bbb').href="http://www.baidu.com";
document.getElementById('aaa').target="_blank";
document.getElementById('bbb').target="_blank";
}
</script>
</head>

<body>
<a id="aaa" href="http://www.microsoft.com">123</a>
<a id="bbb" href="http://www.microsoft.com">456</a>
    <input type="button" onclick="changeLink()" value="更改链接">

</body>
</html>

结果阶段a:
在这里插入图片描述
结果阶段b:
在这里插入图片描述

greyKing666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML中图像标记img的使用
一沐一星辰
03-06 1536
让我们一起来学习一下HTML中的img标记吧~
jquery的HTML 的 element选择和创建
sunjiyun26的博客
08-18 1725
昨天和今天被坑了两次，昨天遇到了，今天也遇到了。写这篇谨记。 在jquery中，创建一个html元素有这样一种写法 $("",{ id:'test', class:'testclass' }) 选择元素 用下面的方法 $("div") 我遇到的场景本来是 通过循环，动态生成添加HTML元素 $(data).each(function (i,
在js中使用createElement创建HTML对象和元素
热门推荐
hgc0221的博客
10-20 3万+
在js中使用createElement创建HTML对象和元素
使用PHP创建HTML元素：html_element类
culuo8053的博客
07-30 245
I love creating HTML elements using the MooTools JavaScript library. It's easy, fast, and the JavaScript code to create the element is beautiful. That got me thinking -- why don't I do this using PH...
html创建树控件,构建HtmlElement对象树
weixin_33334565的博客
06-08 349
这样做// On screen webbrowser controlwebBrowserControl.Navigate("about:blank");webBrowserControl.Document.Write("This will change");var elementToReplace = webBrowserControl.Document.GetElementById("div1"...
Dom
03-09
**DOM（Document Object Model）详解** DOM，全称为文档对象模型（Document Object Model），是W3C组织制定的一种标准，它提供了一种结构化的表示XML或HTML文档的方式，并且允许程序和脚本动态地访问和更新文档的...
dom
02-24
DOM，全称为“Document Object Model”，中文译为“文档对象模型”，是Web开发中的一个核心概念，尤其是在JavaScript中。它是一种标准，定义了如何表示HTML或XML文档，并提供了与这些文档交互的API（应用程序编程...
常用DOM整理
09-03
js在操作DOM中存在着许多跨浏览器方面的坑，本文花了我将近一周的时间整理，我将根据实例整理那些大大小小的“坑”。
dom4j_dom4j1.6.1安装包_
10-03
DOM4J是一个强大的Java库，专门用于处理XML文档。它提供了灵活、高效的API，使得XML的解析、创建、查询和修改变得更为简单。在本文中，我们将深入探讨DOM4J 1.6.1版本的安装及其在Maven项目中的应用。 首先，DOM4J...
dom4j解析xml文件的压缩包
11-23
DOM4J是一个强大的Java库，专门用于处理XML文档。它提供了灵活且高效的API，使得XML的解析、创建、查询和修改变得简单。这个压缩包包含了DOM4J的完整版本，适用于那些希望在Java项目中使用DOM4J进行XML操作的开发者...
Dom.rar_DOM
最新发布
09-23
8. **DOM2级和DOM3级**：DOM的后续版本增加了更多的功能，如样式操作、XML支持、事件接口等。 9. **性能优化**：频繁的DOM操作会降低页面性能，因此应尽量减少不必要的操作，使用文档碎片（`document....
dom.rar_DOM
09-22
在本案例中，“dom.rar_DOM”是一个关于将DOM影像数据导入ArcSDE数据库的程序或脚本。 ArcSDE，全称ArcSDE for GIS，是由Esri公司开发的一款空间数据引擎，用于支持大型地理数据库的管理和分发。它能够连接多种...
createElement
qiaoyuetian博客访谈
11-05 689
createElement 创建 HTML 元素，在 IE4.0 中只能创建 img、area、option，不过在 IE5 中，我们可以创建除 frame、iframe 以外的所有元素。语法：oElement = document.createElement(sTag)sTag 要创建的元素名字，如：img、select、input，字符串类型。返回值：返回新元素的引用。
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
JS DOM pink教程源码
08-13
在这个"JS DOM pink教程源码"中，我们可以深入理解DOM操作的核心概念和技巧。 首先，我们需要了解DOM的基本概念。在JavaScript中，`document`对象是DOM的根，包含了整个网页的所有元素。通过这个对象，我们可以获取...
JavaScript DOM 高级编程指南
"JavaScript DOM 高级程序设计（加）桑贝斯" JavaScript DOM（Document Object Model）高级程序设计是Web开发中的重要主题，它涉及到如何使用JavaScript与网页的结构进行交互，包括创建、修改和操作HTML和XML文档的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值