JavaWeb学习笔记07-JavaScriptDOM对象（2）

最新推荐文章于 2021-12-24 21:03:11 发布

Jackson王

最新推荐文章于 2021-12-24 21:03:11 发布

阅读量77

点赞数

分类专栏： web 文章标签： JS

本文链接：https://blog.csdn.net/wy19961103/article/details/103256643

版权

web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

DOM：

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

* W3C DOM 标准被分为 3 个不同的部分：

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

核心DOM模型：

* 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. 属性

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

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

01代码实现document对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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="cls1">div5</div>
<input type="text" name="username">
<script>
    //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);

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

02代码实现Element对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element对象</title>
</head>
<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>
</html>

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属性值。

代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HOME DOM</title>
</head>
<body>
<div id="div1">
    div
</div>
<script>
var div = document.getElementById("div1");
var innerHTML = div.innerHTML;
// alert(innerHTML);
    div.innerHTML="<input type='text'>";//div标签替换一个文本输入框
    div.innerHTML+="<input type='text'>";//div标签追加一个文本输入框
</script>

</body>
</html>

两种样式控制代码实现
<!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="div2">
    div
</div>
<script>
    var div = document.getElementById("div1");
    div.onclick =function(){
          div.style.border="1px solid red"//修改样式
          div.style.width="200px"//修改样式
    }


    var div2 = document.getElementById("div2");//第二种方式
    div2.onclick = function(){
        div2.className = "d1";
    }
</script>
</body>
</html>

Jackson王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习笔记07-JavaScriptDOM对象（2）

DOM：* 概念： Document Object Model 文档对象模型 *将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作* W3C DOM 标准被分为 3 个不同的部分： 1. 核心 DOM - 针对任何结构化文档的标准模型 * Document：文档对象 * Element：元素对象 * Attribute：属性对象...
复制链接

扫一扫