JavaScript个人学习笔记（五）

最新推荐文章于 2023-03-30 09:46:45 发布

Roxannekkk

最新推荐文章于 2023-03-30 09:46:45 发布

阅读量206

点赞数

分类专栏：知识点总结

本文链接：https://blog.csdn.net/weixin_44774255/article/details/109545229

版权

知识点总结专栏收录该内容

64 篇文章 0 订阅

订阅专栏

DOM（将HTML文档表达为树的结构）：Document Object Model文档对象模型；将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言进行CRUD（增删改查）的动态操作。
在这里插入图片描述

在这里插入图片描述
W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型

Document对象
Element元素对象
Attribute属性对象
Text文本对象
Comment注释对象
Node节点对象，其他五个的父对象

XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

核心DOM模型：重点学习以下三个：

Document对象:
	1.创建（获取）：在html dom模型中，可以使用window对象来获取（因为document对象是window对象的一部分）
		1.window.document
		2.document
	2.方法（此处查看xml文档，因为html文档对dom修改很多）
		1.获取Element对象
			1.getElementById()	根据id属性值获取元素对象。id属性值一般唯一
			2.getElementsByTagName() 根据元素名称获取元素对象们，返回值是一个数组
			3.getElementsByClassName()根据class属性值获取元素对象们，返回值是一个数组
			4.getElementsByName()根据name属性值获取元素对象们，返回值是一个数组
		2.创建其他DOM对象
			createAttribute(name)
			createComment()
			createElement()
			createTextNode()
		3.属性
Element元素对象  
	1.获取/创建：通过document来获取和创建
	2.方法：
		1.removeAttribute() 删除属性
		2.setAttribute() 设置属性
Node节点对象（node封装的方法，是所有的文本，属性，dom对象都可以使用的公共方法）
	特点：所有DOM对象都可以被认为是一个节点
	方法：
		CRUD dom树：
			appendChild()向子节点列表的结尾添加新的子节点。
			removeChild()删除（并返回）当前节点指定的子节点
			replaceChild() 用新节点替换一个子节点
	属性：
		parentNode 返回节点的父节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document对象</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>

    <div id="div3">div3</div>

    <div class="cls1">div4</div>
    <div class="cls2">div5</div>
    <input type="text" name="username">
    <script>
        /**
         * Document对象:
	    1.创建（获取）：在html dom模型中，可以使用window对象来获取（因为document对象是window对象的一部分）
		    1.window.document
		    2.document
	    2.方法（此处查看xml文档，因为html文档对dom修改很多）
		    1.获取Element对象
			    1.getElementById()	根据id属性值获取元素对象。id属性值一般唯一
			    2.getElementsByTagName() 根据元素名称获取元素对象们，返回值是一个数组
			    3.getElementsByClassName()根据class属性值获取元素对象们，返回值是一个数组
			    4.getElementsByName()根据name属性值获取元素对象们，返回值是一个数组
		2.创建其他DOM对象
			createAttribute(name)
			createComment()
			createElement()
			createTextNode()
        */
       //2.根据元素名称获取元素对象们，返回值是一个数组
       var divs=document.getElementsByTagName("div");
       //alert(divs.length);

       //3.根据class属性值获取元素对象们，返回值是一个数组
       var divscls=document.getElementsByClassName("cls1");
       //alert(divscls.length);

       //4.getElementsByName()根据name属性值获取元素对象们，返回值是一个数组
       var eleusername=document.getElementsByName("username");
       //alert(eleusername.length);

       var table=document.createElement("table");
       alert(table);
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<input value="OK">

<p id="demo">点击按钮来设置按钮的 type 属性。</p>

<button onclick=myFunction()>试一下</button>

<script>
function myFunction()
{
document.getElementsByTagName("input")[0].setAttribute("type","button"); 
}
</script>

<p>Internet Explorer 8 以及更早的版本不支持此方法。</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border:1px solid hotpink;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        
        <div id="div2">div2</div>
        div1
    </div>
    <!--<a href="" id="del">删除子节点</a>-->
    <!--href为空相当于在本页面跳转，点一下就跳到当前页面了，在刷新就回去了，我们希望他点了之后不进行超链接的跳转但又可以被点击-->
    <!--<input type="button" value="删除子节点" id="del">-->
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
    <script>
        var elementa=document.getElementById("del");
        elementa.onclick=function(){
            var div1=document.getElementById("div1");
            var div2=document.getElementById("div2");
            div1.removeChild(div2);

        }


        var elementadd=document.getElementById("add");
        elementadd.onclick=function(){
            var div1=document.getElementById("div1");
           //给div1添加子节点
           //创建div节点
           var div3=document.createElement("div");
           div3.setAttribute("id","div3");
           
           div1.appendChild(div3);

        }

        var p=document.getElementById("div2");
        alert(p.parentNode);
        /*
        超链接功能：
        1.可以被点击，样式
        2.点击后跳转到href指定的url

        需求：保留一功能去掉二功能
        实现方式：href="javascript:void(0);"
        */
    </script>
</body>
</html>

Roxannekkk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript个人学习笔记（五）

DOM（将HTML文档表达为树的结构）：Document Object Model文档对象模型；将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言进行CRUD（增删改查）的动态操作。
复制链接

扫一扫