JavaScript DOM操作

最新推荐文章于 2023-08-09 18:31:11 发布

七月_M

最新推荐文章于 2023-08-09 18:31:11 发布

阅读量173

点赞数

分类专栏： JS 文章标签： javascript js

本文链接：https://blog.csdn.net/began2009/article/details/108438607

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

认识DOM

文档对象模型 Document Object Model，定义访问和处理HTML文档的标准方法。

认识DOM

DOM将HTML文档呈现为带有元素、属性和文本的树结构。

如代码：

将HTML代码分解为DOM节点层次图:

HTML文档可以说是由节点构成的集合，三种常见的DOM节点:

1. 元素节点：<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

节点属性

遍历节点树

DOM操作

注意:前两个是document方法。

通过ID获取元素

语法：

document.getElementById("id")

结果: null或[object HTMLParagraphElement]

注: 获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

innerHTML属性

用于获取或者替换HTML元素的内容。

语法：

Object.innerHTML
//Object是获取的元素对象，如通过document.getElementById("id")获取的元素

<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言</p>
<script type="text/javascript">
  var mychar=document.getElementById("con")           ;
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="hello world!"
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>

//输出结果
JavaScript是一种基于对象、事件驱动的简单脚本语言

原标题:javascript
修改后的标题:hello world!

改变HTML样式

HTML DOM允许JavaScript改变HTML元素的样式。

语法：

Object.style.property=new style;
//Object是获取的元素对象

基本属性表（property):

示例，改变<p>元素的样式，将颜色改为红色，字号改为20，背景颜色改为蓝：

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

显示和隐藏（display属性）

语法：

Object.style.display = value

value取值：

       function hidetext()  
		{  
		var mychar = document.getElementById("con");
            mychar.style.display="none";
		}  
		function showtext()  
		{  
		var mychar = document.getElementById("con");
             mychar.style.display="block";
		}

控制类名（className属性）

className属性设置或返回元素的class属性。

语法：

Object.className=classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

<script type="text/javascript">
	   function get(){
	      var p1 = document.getElementById("p1");
	     document.write(p1.className+"<br>");
	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
	      p2.className="two";
	   }
	</script>

七月_M

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM操作

认识DOM文档对象模型 Document Object Model，定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构。HTML文档可以说是由节点构成的集合，三种常见的DOM节点:1. 元素节点：<html>、<body>、<p>等都是元素节点，即标签。2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。3. 属性节点:元素属性
复制链接

扫一扫