JavaWeb学习笔记(15)__DOM

最新推荐文章于 2024-08-10 18:03:04 发布

耿鬼不会笑

最新推荐文章于 2024-08-10 18:03:04 发布

阅读量156

点赞数

分类专栏： # JavaWeb开发基础文章标签： css js javascript java html

本文链接：https://blog.csdn.net/A233666/article/details/105457210

版权

JavaWeb开发基础专栏收录该内容

23 篇文章 2 订阅

订阅专栏

1.DOM

本文章基于黑马程序员视频教程《JavaWeb从入门到精通》进行整理，并由个人对部分内容进行补充说明。本文章仅用于个人学习/交流使用。

目录结构

- - 1.DOM

1.简单学习

* HTML DOM
	1. 标签体的设置和获取：innerHTML
	2. 使用html元素对象的属性
	3. 控制元素样式
		1. 使用元素的style属性来设置
			如：
				 //修改样式方式1
		        div1.style.border = "1px solid red";
		        div1.style.width = "200px";
		        //font-size--> fontSize
		        div1.style.fontSize = "20px";
		2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

功能：控制html文档的内容
* 获取页面标签(元素)对象：Element
	* document.getElementById("id值"):通过元素的id获取元素对象

* 操作Element对象：
	1. 修改属性值：
		1. 明确获取的对象是哪一个？
		2. 查看API文档，找其中有哪些属性可以设置
	2. 修改标签体内容：
		* 属性：innerHTML
		1. 获取元素对象
		2. 使用innerHTML属性修改标签体内容

通过id获取元素对象

加载顺序问题：如果将<script>写在<head>中，有可能因为先加载<head>的内容，后加载<body>的内容，导致<body>里面的数据无法被获取，得到一个空的对象，可以将<script>写在<body>后面解决此问题。

2.系统学习

概念： Document Object Model 文档对象模型

* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

* W3C DOM 标准被分为 3 个不同的部分：核心DOM,XML DOM,HTML DOM

* 核心 DOM - 针对任何结构化文档的标准模型
    * Document：文档对象
    * Element：元素对象
    * Attribute：属性对象
    * Text：文本对象
    * Comment:注释对象
	* Node：节点对象，其他5个的父对象
 * XML DOM - 针对 XML 文档的标准模型
 * HTML DOM - 针对 HTML 文档的标准模型

2.核心DOM模型

1.Document对象

* Document：文档对象
		1. 创建(获取)：在html dom模型中可以使用window对象来获取
			1. window.document
			2. document
		2. 方法：
			1. 获取Element对象：
				1. getElementById()	： 根据id属性值获取元素对象。id属性值一般唯一
				2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
				3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
				4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
			2. 创建其他DOM对象：
				createAttribute(name)
            	createComment()
            	createElement()
            	createTextNode()
		3. 属性

Document对象：

<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div class="cls1">div4</div>
    <div class="cls1">div5</div>
    <input type="text" name="username">
<script>
	//1.根据元素id获取元素对象。返回值是一个唯一值
	var div1 = document.getElementsById("div1");
    //2.根据元素名称获取元素对象们。返回值是一个数组
    var divs = document.getElementsByTagName("div");
    //alert(divs.length);
    //3.根据Class属性值获取元素对象们。返回值是一个数组
    var div_cls = document.getElementsByClassName("cls1");
   // alert(div_cls.length);
    //4.根据name属性值获取元素对象们。返回值是一个数组
    var ele_username = document.getElementsByName("username");
    //alert(ele_username.length);
	//5.创建新的
    var table = document.createElement("table");
    alert(table);
</script>

2.Element对象

* Element：元素对象
			1. 获取/创建：通过document来获取和创建
			2. 方法：
				1. removeAttribute()：删除属性
				2. setAttribute()：设置属性

Element对象

<body>
    <a>点我试一试</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">
<script>
    //获取btn
    var btn_set =document.getElementById("btn_set");
    btn_set.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.setAttribute("href","https://www.baidu.com");
    }
    //获取btn
    var btn_remove =document.getElementById("btn_remove");
    btn_remove.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.removeAttribute("href");
    }
</script>
</body>

3.Node对象

* Node：节点对象，其他5个的父对象
			* 特点：所有dom对象都可以被认为是一个节点
			* 方法：
				* CRUD dom树：
					* appendChild()：向节点的子节点列表的结尾添加新的子节点。
					* removeChild()	：删除（并返回）当前节点的指定子节点。
					* replaceChild()：用新节点替换一个子节点。
			* 属性：
				* parentNode 返回节点的父节点。

Node对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div{
            border: 1px solid red;
        }
        #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="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
    <!--<input type="button" id="del" value="删除子节点">-->
<script>
    //1.获取超链接
    var element_a = document.getElementById("del");
    //2.绑定单击事件
    element_a.onclick = function(){
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }
    //1.获取超链接
    var element_add = document.getElementById("add");
    //2.绑定单击事件
    element_add.onclick = function(){
        var div1 = document.getElementById("div1");
       //给div1添加子节点
        //创建div节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");
        div1.appendChild(div3);
    }
    /*
        超链接功能：
            1.可以被点击：样式
            2.点击后跳转到href指定的url

        需求：保留1功能，去掉2功能
        实现：href="javascript:void(0);"
     */
    var div2 = document.getElementById("div2");
    var div1 = div2.parentNode;
    alert(div1);
</script>
</body>
</html>

3.HTML_DOM

HTML DOM

标签体的设置和获取：innerHTML
使用html元素对象的属性

控制元素样式
1. 使用元素的style属性来设置
2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

<body>
    <div id="div1">
        这是div
    </div>
    <script >
        var div = document.getElementById("div1");
        var innerHTML = div.innerHTML;
        //alert(innerHTML);
        //将div标签替换为一个文本输入框
		//div.innerHTML = "<input type='text'>";
        //div标签中追加一个文本输入框
        div.innerHTML += "<input type='text'>";
    </script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制样式</title>
    <style>
        .d1{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
       .d2{
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="div1">
        div1
    </div>
    
    <div id="div2">
        div2
    </div>
    
<script>
	//修改样式方式1--使用style
    var div1 = document.getElementById("div1");
    div1.onclick = function(){    
        div1.style.border = "1px solid red";
        div1.style.width = "200px";
        //font-size--> fontSize
        div1.style.fontSize = "20px";
    }
	//修改样式方式2
    var div2 = document.getElementById("div2");
    div2.onclick = function(){
        div2.className = "d1";
    }
</script>
</body>
</html>

耿鬼不会笑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习笔记(15)__DOM

1.DOM本文章基于黑马程序员视频教程《JavaWeb从入门到精通》进行整理，并由个人对部分内容进行补充说明。本文章仅用于个人学习/交流使用。目录结构1.DOM1.简单学习2.核心DOM模型1.Document对象2.Element对象3.Node对象3.HTML_DOM1.简单学习* HTML DOM 1. 标签体的设置和获取：innerHTML 2. 使用html元素对象的属性 ...
复制链接

扫一扫

专栏目录