DOM的简介（个人理解）

最新推荐文章于 2023-09-05 09:26:32 发布

Fancy_夏沫

最新推荐文章于 2023-09-05 09:26:32 发布

阅读量754

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Fancy_vae/article/details/108188151

版权

1 定义

HTML DOM是HTML Document Object Model的缩写，称为文档对象模型。
HTML DOM 定义了一系列标准的对象，以及访问和处理 HTML 文档的标准方法，将网页中的每个元素都看作一个对象。
通过 HTML DOM， JavaScript可访问HTML文档的所有元素和属性。

2 Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象
通过使用 Document 对象，脚本可以对 HTML 页面中的所有元素进行访问
– document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问
DOM:文档对象模型，JS将HTML文档中的所有元素以一个树形的目录结构描述
在这里插入图片描述

3 查找元素节点的方法

getElementById()
var XX = document.getElementById(“ID”);
通过指定的 ID 来返回元素节点
如果 ID 值错误，则返回 null

getElementsByTagName() (返回的是数组，需要指定下标到指定元素)
根据指定的标签名称返回所有的元素
如果标签名称错误，则返回长度为 0 的节点列表

getElementsByName()(返回的是数组，需要指定下标到指定元素)
根据指定的name属性值返回所有的元素
如果标签名称错误，则返回长度为 0 的节点列表

getElementsByClassName()(返回的是数组，需要指定下标到指定元素)
根据指定的class属性值返回所有的元素,该方法是HTML5 新增的DOM API。IE8以下不支持

返回一个节点列表
使用节点列表的 length 属性获取个数
[index]：定位具体的元素

4.修改元素节点的内容和样式

innerHTML 、src、href属性

style 属性 :
node.style.color 
node.style.fontSize 
className 属性 :

代码：
var o = document.getElementById("p1");
o.style.color = “red”;
o.style.fontSize = 20;
o.className = “样式类名称”;

4.1通过className 加载类选择器样式   不能通过 class 属性来修改 
4.2 通过style 属性进行修改style.js对应的样式属性 要求把 css中的样式属性 的 中划线‘——’去掉 然后 后面的字母变大写
要么你就使用 类选择器加载。
4.3 还可以通过 style.cssText="这里就是把样式表中的大阔号去掉之后的内容";


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css"> //类选择器加载
    .div{
        color:blue;
    }

</style>
<script type="text/javascript">
    function loadContent(){
        var content = document.getElementById('123');
//      alert(content);
        content.innerHTML = '123';
    }

    function changeCss(){
        var img = document.getElementById('123');//根据ID获得元素
//      img.className = 'div'; //方式一:类选择器
//      img.class = 'div'; //错误的方式:错误 语法不报错
        img.style.width = '200px';
        img.style.height = '100px';
        img.style.border = '2px solid red';
        // 方式二:JS语法 backgroundColor  对应 CSS语法   background-color: 
        img.style.backgroundColor = 'RGB(111,111,111)';
        img.style.cssText = 
        //方式三：把样式表中的{}去掉的内容
            'width:200px; height:100px; border:2px solid; color:blue;'; 
        }
</script>

</head>
<body>
    <input type="button" value="加载内容" onclick="loadContent()" />
    <input type="button" value="点击切换样式" onclick="changeCss()">
    <div id="123" class='div'></div>
</body>
</html>

5 根据层次查找元素节点

parentNode 、firstChild 和 lastChild
遵循文档的层次结构，查找单个节点

childNodes
遵循文档的层次结构，查找多个节点

nodeName,nodeValue ,nodeType
nodeName 元素节点返回标签名;属性节点返回属性名;文本节点返回#text
nodeValue 元素节点返回null;属性节点返回属性值;文本节点返回内容
nodeType 1表示元素节点;2表示属性节点;3表示文本节点

attributes 获取所有的属性节点然后把属性节点作为值存入一个Map结构中以属性名作为 key
遵循文档的层次结构，查找多个属性

代码示例：

hello world

其中:

元素节点
id=‘div1’ 属性节点
hello world 文本节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    function NodeOperate() {

        var div = document.getElementById('divId'); //根据ID获取div元素

        alert('div的nodeName: ' + div.nodeName); //元素节点返回标签名 div
        alert('div的nodeValue: ' + div.nodeValue);//元素节点返回null  
        alert('div的nodeType: ' + div.nodeType); //元素节点返回1

        var attrs = div.attributes;//获得元素的属性
        alert(attrs);//object NamedNodeMap
        var att = attrs.getNamedItem('id');//等同于 var att = attrs['id'];
        alert(att);//object Attr
        alert('att的nodeName: ' + attrs.getNamedItem('id').nodeName); //属性节点返回属性名 id
        alert('att的nodeValue: ' + attrs.getNamedItem('id').nodeValue);//属性节点返回属性值 divId
        alert('att的nodeType: ' + attrs.getNamedItem('id').nodeType); //2表示属性节点 2

        //获取文本途径
        //方式一: 元素.innerHTML
        alert("文本信息1:"+div.innerHTML);
        //方式二: 元素.孩子节点.nodeValue
        alert("文本信息2:"+div.firstChild.nodeValue);
        //方式三:方式二变形
        alert("文本信息3:"+div.childNodes[0].nodeValue);    
    }

</script>
</head>
<body>
    <input type="button" value="节点操作" onclick="NodeOperate()"> </input>
    <div id="divId" class='divClass'>hello world</div>
</body>
</html>

实例：
<select id="s1">
    <option value="101">娜英</option>
    <option value="102">周杰伦</option>
    <option value="103">哈林</option>
    <option value="104">汪峰</option>
 </select> 
var s1 = document.getElementById("s1");
alert(s1.childNodes.length);//7 `在这里插入代码片`
var o1 = s1.firstChild;

6 元素节点的定义增删

创建新的元素节点

document.createElement(elementName)
elementName：要创建的元素标签名称 
返回新创建的节点 

代码：
var newNode = document.createElement("input");
newNode.type = "text";
newNode.value = "mary";
newNode.style.color = "red";

添加新的元素节点

parentNode.appendChild(newNode)
追加：新节点作为父节点的最后一个子节点存在 
parentNode.insertBefore(newNode,refNode)
refNode：参考节点，新节点位于此节点之前

删除元素节点

删除某个子节点 ： parentNode.removeChild(childNode)
function deleteNode()
{
    var delNode = document.getElementById("a1");
    delNode.parentNode.removeChild(delNode);
}
删除多个子节点 ：
function removeAll() {
    //方式一 循环删除 只删除第一个元素 
    var sel1 = document.getElementById('sel1');
    var list = sel1.childNodes;
    for (var i = 0; i < list.length; i++) {
        sel1.removeChild(list[0]);
        list --;
    }

    //方式二 修改属性长度
    var  sel1 = document.getElementById("sel1");
    var  options = sel1.options;
    //alert(options.length);
    options.length=0;
}

综合Demo代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function remove() {//删除单个节点
        var sel1 = document.getElementById('sel1');
        var A = document.getElementById('A');
        sel1.removeChild(A);
    }

    function add() {
    var sel = document.getElementById('sel1');
    var opt = document.createElement('option');
    opt.innerHTML = 'ADD';
    sel.appendChild(opt)
    }

    function removeAll() {
        //方式一 循环删除 只删除第一个元素 
        var sel1 = document.getElementById('sel1');
        var list = sel1.childNodes;
        for (var i = 0; i < list.length; i++) {
            sel1.removeChild(list[0]);
            list --;
        }

        //方式二 修改属性长度
        var  sel1 = document.getElementById("sel1");
        var  options = sel1.options;
        //alert(options.length);
        options.length=0;
    }
</script>
</head>
<body>
    <input type="button" value='增加节点' onclick='add()'>
    <input type="button" value='删除节点' onclick='remove()'>
    <input type="button" value='删除节点全部' onclick='removeAll()'>
    <select id='sel1'>
        <option id='A'>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
</body>
</html>

Fancy_夏沫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM的简介（个人理解）

1 定义HTML DOM是HTML Document Object Model的缩写，称为文档对象模型。HTML DOM 定义了一系列标准的对象，以及访问和处理 HTML 文档的标准方法，将网页中的每个元素都看作一个对象。通过 HTML DOM， JavaScript可访问HTML文档的所有元素和属性。2 Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象通过使用 Document 对象，脚本可以对 HTML 页面中的所有元素进行访问– document
复制链接

扫一扫