js-dom

最新推荐文章于 2022-10-20 23:21:37 发布

vision_seven7

最新推荐文章于 2022-10-20 23:21:37 发布

阅读量262

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/vision_seven7/article/details/104698370

版权

前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

自定义标题

什么是dom

DOM，全称Document Object Model文档对象模型。
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

在dom中，所有HTML元素都被定义为对象
属性是我们能够获取或设置的值（改变页面元素的内容）

方法是能够完成的动作（比如添加页面元素）

<html>
<body>
	<div id="box"></div>
	<script>
		document.getElementById("box").innerHTML = "ABC";
	</script>
</body>
</html>

getElementById是方法，而innerHTML是属性

文档

文档表示的就是整个的HTML网页文档

模型

使用模型来表示对象之间的关系，这样方便我们获取对象

节点

节点：Node——构成HTML文档最基本的单元。
常用节点分为四类

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

操作dom元素

查元素

(1)根据id获取页面元素

getElementById
如果id不存在，获取到的是null
id具有唯一性，所以不要使用同名的id

<body>
	<div id="box" class="one" name="123">我是一个盒子</div>
	<div id="box1" class="one" >我是一个盒子</div>
	<input type="button" name="aaa"  value="我是按钮">
</body>
<script>
	var box = document.getElementById("box") //获取到了id名为box的页面元素
	console.log(box);  //打印结果就是   <div id="box" name="123">我是一个盒子</div>
	var box1 = document.getElementById("div") 
	console.log(box1); //在页面中没有id名为div的页面元素，打印出的结果是null
</script>

(2)根据类名获取页面元素

getElementsByClassName

//网页元素同上
<script>
	var one = document.getElementsByClassName("one");
	console.log(one);//获取的是一个伪数组
	one.reverse();//报错  伪数组不能调用数组的方法
</script>

(3)根据标签名获取页面元素

getElementsByTagName

<script>
	var divs = document.getElementsByTagName("div");  // 标签名获取元素 获取得是伪数组
</script>

(4)根据name属性名获取页面元素

document.getElementsByName（“name属性名”）
适用于拥有name属性的表单元素，获取的也是伪数组

<script>
	var divs = document.getElementsByName("aaa");  //  获取得是伪数组
</script>

查属性

1.点语法

点语法操作元素属性注意点：

只能获取行内属性，不能获取行外属性
获取到的的带单位的字符串
属性既可以获取也可以修改
获取类名使用className，不能使用class，因为class是关键字

点语法获取元素的特点：

可以获取标准属性（主要）
可以获取点语法动态添加的属性
无法获取行内自定义属性
无法获取行外属性

<script>
	//获取元素
	var box = document.getElementsById("box");
	
	//给属性对象赋值
	box.style.backgroundColor = "green";
	//注意：背景颜色如果写成background-color，会报错，颜色需要带引号 
	//如果加上里面操作html样式属性   有-，把命名改成驼峰命名法

</script>

attribute

attribute获取元素的特点

可以获取标准属性
可以获取行内自定义属性（主要用来操作行内自定义属性）
无法获取行外属性
无法获取点语法动态添加的属性

（1）读取属性

使用元素的 getAttribute() 方法可以读取指定属性的值。

<div id="box1">千与千寻</div>
<div id="box2">哈尔的移动城堡</div>
<script>
    var box1 = document.getElementById("box1");  //获取第一个盒子
    console.log(box1.getAttribute("id"));  //显示第一个盒子的id属性值
    var blue = document.getElementById("box2");  //获取第二个盒子
    console.log(box2.getAttribute("id"));  //显示第二个盒子的id属性值
</script>

（2）设置属性

使用元素的 setAttribute() 方法可以设置元素的属性值

<div id="box1">千与千寻</div>
<div id="box2">哈尔的移动城堡</div>
<script>
    var box1 = document.getElementById("box1");  //获取第一个盒子的引用
    var box2= document.getElementById("box2");  //获取第二个盒子的引用
    red.setAttribute("title", "千与千寻");  //为box1对象设置title属性和值
    blue.setAttribute("title", "哈尔的移动城堡");  //为box2对象设置title属性和值
</script>

删除属性

使用元素的 removeAttribute() 方法可以删除指定的属性

<div id="box1" style = "color : pink">千与千寻</div>
<div id="box2">哈尔的移动城堡</div>
<script>
    var box1 = document.getElementById("box1");  //获取第一个盒子的引用
    var box2= document.getElementById("box2");  //获取第二个盒子的引用
    box2.onclick = function(){
			box1.removeAttribute("style","color : pink")   //点击二号盒子会删除一号盒子的字体颜色
}
</script>

vision_seven7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-dom

什么是domDOM，全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。在dom中，所有HTML元素都被定义为对象属性是我们能够获取或设置的值（改变页面元素的内容）方法是能够完成的动作（比如添加页面元素）<html><body> <div id="box"...
复制链接

扫一扫