JS中DOM（文档对象模型）常见属性和方法_document.creatattribute可以添加颜色属性吗-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41141896/article/details/92799868

DOM是Document Object Model的缩写，用于将HTML或XML文档封装为对象。它由Document、Element、Attribute、Text和Comment等对象组成。在JavaScript中，可以使用window.document获取Document对象，并通过getElementById、getElementsByTagName、getElementsByName和getElementsByClassName等方法来查找元素。此外，还可以使用createElement、createAttribute、createComment和createTextNode来创建新的DOM对象。Element对象的innerHTML和innerText属性分别用于获取和设置元素的子内容，其中innerText只获取文本内容，而innerHTML则包括子标签的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM：Document Object Model 文档对象模型
       概念：将标记语言文档的各个组成部分封装为对象
       组成：
             Document：文档对象
             Element:元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
  Node：节点对象

其中：Document：文档对象
获取：window.document //其中的window可省略不写

//document 中 body属性 可以获取body标签对象
document.body.bgColor = "red";//设置body标签的背景颜色为红色

//title 属性获取文档标题
var bt = document.title; 

//获取文档最后一次修改时间 
var rq=document.lastModified;

//URL 属性 获取地址栏中的地址
var url=document.URL;

  方法：
                 获取Element对象
                   getElementById(); //通过id属性值获取唯一的元素
                   getElementsByTagName(); //通过标签名称获取元素对象数组
                   getElementsByName(); //通过name属性值获取元素对象数组
                   getElementsByClassName(); //通过class属性值获取元素对象数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>abc</li>
			<li>序列一</li>
			<li>序列二</li>
			<li>序列三</li>
			<li>序列四</li>
		</ul>
		
		<h1 id="myh1">自己写的一行文本</h1>
		
		<b>我是b标签</b>
        <b>我是b标签</b>
        <b>我是b标签</b>
        <b>我是b标签</b>
        <b>我是b标签</b>
        <b>我是b标签</b>
		
	</body>
	<!--script标签在页面中的位置是随意的，但此处将其写在body下面是为了保障调用body中内容时能先被渲染-->
	<script type="text/javascript">
		//document中的方法
		//有关获取的方法 
		//通过一个标签的id 来获取一个标签对象
		//var h1ELE=document.getElementById("myh1"); 
		//标签对象的属性
		// var text=h1ELE.innerHTML;//获取标签之间的内容
		// h1ELE.innerHTML="设置标签之间的文本";
		// //alert(text);
		//通过标签名来获取多个标签对象 //返回是装有多个标签对象的数组
		var bs=document.getElementsByTagName("b");
		//alert(bs.length);
		//bs[0].style.color="red";
		for(var i=0;i<bs.length;i++)//此处用数组遍历，来使偶数标签<b>渲染为红色，奇数为绿色
			if(i%2==0){
				bs[i].style.color="red";
				bs[i].style.fontSize="20px"
			}else{
				bs[i].style.color="green";
				bs[i].style.fontSize="10px"
			}
		}
	</script>
</html>

//删除属性
//根据属性名,来删除属性
//document.getElementsByTagName("h1")[0].removeAttribute("style");
//根据属性对象,来删除属性
document.getElementsByTagName("h1")[0].removeAttributeNode(atr);

* 创建其他对象
createElement:创建元素对象
createAttribute：创建属性对象
createComment：创建注释对象
createTextNode：创建文本对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
	<script type="text/javascript">
		var bd=document.body;
		var mycom=document.createComment("这是一行注释");
		//创建属性对象
		var attri=document.createAttribute("style");
		attri.value="color:red;background:yellow";
		//创建DOM对象
		//创建标签对象
		var myH1=document.createElement("h1");
		//myH1.setAttributeNode(attri); //设置属性对象
		//给标签设置属性以及属性的值
		myH1.setAttribute("style",'color:red;background:yellow;font-size:100px');
		//创建文本对象
		var myText=document.createTextNode("这是一行文本内容");
		//把文本对象,放到标签之间
		myH1.appendChild(myText);
		//把<h1>标签对象,放到body里面
		bd.appendChild(myH1);
		bd.appendChild(mycom);


        删除DOM元素
        //myH1.removeChild(myText); //通过父元素删除子元素
		//myH1.remove(); 元素自己删自己
		bd.removeChild(myH1);
		
	</script>
</html>

//动态创建标签对象
var my=document.creatElement("h1");

//创建文本对象
var my2=document.creatTextNode("文本");
my.appendChild(my2);
var bd=document.body;
bd.appendChild(my);

//创建属性对象：
var my3=document.creatAttribute("style");
my3.value="color:red";

my.setAttributeNode(my3);//设置属性对象
my.setAttribute（"style",'color:red'）;//给标签设置属性与属性值。

 //给属性对象设置值
 font1.setAttribute('color','yellow');//给font1对象设置颜色，可为双引号

 // 例子：    
  var div1 = window.document.createElement("div");//创建一个div标签（元素）
  var text1 = window.document.createTextNode("我是第一个div");//创建一段文本
  var v = div1.appendChild(text1);//将文本内容写入div标签中去
  document.getElementsByTagName("body")[0].appendChild(div1);//由于getElementsByTagName() 返回带有指定标签名的对象集合，所以需要用数组去调用，意思为将div标签加入body标签内部

* Element:元素对象
innerHTML属性：获取或设置元素的子内容。
InnerTEXT属性:获取标签之间的文本内容。

innerHTML与innerTEXT之间存在区别：

innerText;//只获取标签之间的文本，不拿子标签
innerHTML;/获取和设置标签之间的内容，包括子标签
除过上述两个还可以用：textContent;获取和设置文本内容，使用较少。