DOM文档对象模型

最新推荐文章于 2024-11-13 01:18:00 发布

江泽09

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量89

点赞数

分类专栏： javascript 文章标签： javascript html html5

本文链接：https://blog.csdn.net/m0_48622990/article/details/120133810

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

DOM文档对象模型

DOM介绍

js操作html文档的API
1998年10月DOM1级规范成为W3C的推荐标准
IE中的所有DOM对象都是以COM对象的形式实现的

实例化

通过dom拿到我们想要的节点

通过dom创建节点

//通过dom创建节点
 //创建一个LI节点
 var node  = document.creatElement("LI");
 //创建一个text节点
 var textNode = document.creatTextNode("Hello");
 //将text节点追加到li节点上
 node.appendChild(textNode);
 //找到id为myDiv的节点
 var myDiv = document.getElementById("myDiv");
 //将刚刚创建的node节点追加为myDiv的子节点
 myDiv.appendChild(node);

节点类型

Document类型:表示整个html文档
1. 属性：
  1. body 直接指向body元素
  2. head 获取html头部内容
  3. title 获取文档标题
  4. doctype 获取<!DOCTYPE>属性兼容性不太强很少用
  5. URL 获取完整的URL
  6. domain 获取域名
  7. referrer 获取链接到当前页面的那个页面的url
  8. images 获取页面所有的img对象返回值HTMLCollection
  9. forms 获取所有的form表单对象返回值HTMLCollection
  10. links 获取文档中带有href属性的a元素
2. 方法：
  1. getElementById() //通过元素的id获取元素节点
    1. 作用：通过元素的id获取元素节点
    2. 调用者：
    3. 参数：想要获取的元素id
    4. 返回值：找到的第一个元素，如果没有，返回null，
  2. getElementsByClassName() //通过元素的类名获取元素节点
    1. 作用：通过元素的class name 获取元素节点
    2. 调用者：document
    3. 参数：为一个字符串，表示元素的类名可以由空格隔开
    4. 返回值：HTMLCollection 包含一个或多个元素可以使用数组的操作方式去处理结果
  3. getElementsByTagName() //通过标签名获取元素节点
    1. 作用：通过元素的元素名（标签名）找到对应的元素
    2. 调用者：document
    3. 参数：为一个字符串表示元素的元素名（标签名）
    4. 返回值：HTMLCollection list 包含一个或多个元素可以使用数组的操作方式去处理结果
  4. getElementsByName() //通过元素的name属性获取元素节点
    1. 作用：通过元素的name属性找到对应的元素
    2. 调用者：document
    3. 参数：为一个字符串表示元素的name属性
    4. 返回值：NodeList list 包含一个或多个元素，可以使用数组的操作方式去处理结果
```
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div class="app">
		div.app
	</div>
	<div class="app app2">
		div.app2
	</div>
	<div id="app">
	 div#app
	</div>
 <form action="get" name="formApp"></form>

</body>
<script>
	var classApp = document.getElementsByClassName("app app2");
	console.log(classApp[1]);
    var idApp = document.getElementById("app");
	console.log(idApp);
	var myDivs = document.getElementsByTagName("div");
	console.log(myDivs);
	var myName = document.getElementsByName("formApp");
	console.log(myName);
</script>
</html>
```
Element类型
1. 属性：
  1. id 元素在文档中的唯一标识符
  2. title 有关元素的附加说明信息
  3. className 与元素class特性对应可以重复可以有多个用空格分割
  4. src img元素具有的属性
  5. alt img元素具有的属性
  6. lang 元素内容的语言代码，很少使用
  7. dir 语言方向 ltr,rtl 左到右，右到左
  8. 自定义属性
    1. 设置属性 setAttribute();
      1. 作用：给获取到的元素设置属性
      2. 调用者：要设置属性的元素
      3. 参数：两个参数 (属性名对应的值)
      4. 返回值：
      5. 注意：要设置的值存在的话修改原来的值不存在的话添加
    2. 获取属性 getAttribute();
      1. 作用：获取到的相应元素的某个属性
      2. 调用者：元素
      3. 参数：属性名
      4. 返回值：对应的属性值
    3. 移除属性 removeAttribute()
      1. 作用：移除相应元素的某个属性
      2. 调用者：元素
      3. 参数：属性名
      4. 返回值：对应的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="one">

    </div>
    <div class="one" id="myDiv" style="color: brown;">
        <img src="" alt="">
    
        </div>
</body>
<script>
    //自定义属性
    var node = document.getElementsByClassName("one")[0];
    console.log(node);
    node.className = "two";
    //设置属性
    node.setAttribute("class","three");
    //获取属性
    console.log(node.getAttribute("class"));
    var myDiv = document.getElementById("myDiv");
    console.log(myDiv.getAttribute("id"));
    console.log(myDiv.getAttribute("style"));
    //移除属性
    myDiv.removeAttribute("id");
    console.log(myDiv);
</script>
</html>

创建元素 creatwElement();
1. 作用：创建一个dom元素节点
2. 调用者：document
3. 参数：一个参数，要创建元素的标签名在html中不区分大小写但是在XML中区分
chidren
1. firstElementChild 某个节点的第一个孩子元素节点
2. lastElementChild 某个节点的最后一个孩子元素节点
3. nextElementSibling 某个节点的下一个兄弟元素节点
4. previousElementSibling 某个节点的上一个兄弟元素节点
5. childElementCount 该节点子元素的数量
6. innerHTML 返回元素的内容
7. textContent 该元素的内部的text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="one" id="myDiv">
        <div class="div1-1">1</div>
        <div class="div1-2">2</div>
        <div class="div1-3">3</div>
        <div class="div1-4">4</div>
    </div>
</body>
<script>
    //children
    var myDiv = document.getElementById("myDiv");
    console.log(myDiv);
    //找到div1-1 第一个孩子元素节点
    console.log(myDiv.firstElementChild);    //div1-1
    //找到最后一个孩子元素节点
    console.log(myDiv.lastElementChild);     //div1-4
    //获取下一个兄弟元素节点
    console.log(myDiv.firstElementChild.nextElementSibling);  //div1-2
    //获取上一个兄弟元素节点
    console.log(myDiv.lastElementChild.previousElementSibling);  //div1-3
    //获取子元素的数量
    console.log(myDiv.childElementCount);      //4

</script>
</html>

Text类型
1. length 文本长度
2. appendData(text)
  1. 作用：给文本节点追加文本
  2. 调用者：文本节点
  3. 参数：要追加的文本内容
3. deleteData(beginIndex,count)
  1. 作用：删除文本
  2. 调用者：文本节点
  3. 参数：要删除文本的开始索引值，以及删除文本数量
4. insertData(beginIndex,text)
  1. 作用：插入文本
  2. 调用者：文本节点
  3. 参数：要插入的开始位置的索引值，插入的文本内容
5. replaceData(beginIndex,count,text)
  1. 作用：替换文本
  2. 调用者：文本节点
6. splitText(beginIndex)
  1. 作用：将一个文本节点分为两个
  2. 调用者：文本节点
  3. 返回值：分割好文本结点
7. substringData(beginIndex,count)
  1. 作用：从beginIndex开始提取count个子字符串
  2. 调用者：文本节点
8. createTextNode()
  1. 作用：创建文本节点
  2. 调用者：document
  3. 参数：文本内容
  4. 返回值：node

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 文本节点 -->
    <div>hello,world</div>
</body>
<script>
    var div = document.getElementsByTagName("div")[0];
    //获取文本内容
    console.log(div.innerHTML);         //hello,world
    console.log(div.textContent);      //hello,world
    //获取文本长度
    console.log(div.innerHTML.length);    //11
    //追加文本
    var textNode = document.createTextNode("hello");
    textNode.appendData("world");
    console.log(textNode);     //"helloworld"
    //获取已有的文本节点   注：因为获取节点是对象类型，所以下面给节点增加或删除文本内容，会引起原文本改变
    console.log(div.firstChild);      //"hello,world" ----> "hello,world!!!!!!"   ----> "hllo,world!!!!!!"   
    var textNode = div.firstChild;
    console.log(textNode.nodeName);   //#text
    textNode.appendData("!!!!!!");
    console.log(textNode);          //"hello,world!!!!!!"  ----> "hllo,world!!!!!!"  ----> "hello,world!!!!!!"
    textNode.deleteData(1,1);    //"hllo,world!!!!!!"  ----> "hello,world!!!!!!"
    //插入文本
    textNode.insertData(1,"e");        
    console.log(textNode1);     //"hello,world!!!!!!"
</script>
</html>

Comment类型
1. 方法：
  1. 创建注释节点
  2. 获取注释节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comment类型</title>
</head>
<body>
    <div class="app">
        <!-- 这是注释 -->
    </div>
</body>
<script>
    //获取注释节点
    var commentNode = document.getElementsByClassName("app")[0].firstChild.nextSibling;
    console.log(commentNode);       //<!-- 这是注释 -->
    console.log(commentNode.nodeName);     //#comment
    //创建注释节点
    var cNode = document.createComment("这是一个注释");
</script>
</html>