JS学习总结（二）- Dom编程

最新推荐文章于 2024-07-12 14:27:58 发布

b9x_

最新推荐文章于 2024-07-12 14:27:58 发布

阅读量257

点赞数

分类专栏： js 笔记文章标签：笔记

本文链接：https://blog.csdn.net/b9x__/article/details/78773463

版权

笔记同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

1.关于DOM

Document Object Model(文档对象模型)。多用来处理和表示HTML和XML文档。

DOM是针对xml、html的基于树的API。

DOM树定义了节点Node的接口以及许多节点类型来表示文档不同功能不同方面的节点。

DOM结构理解为树型结构，节点就是树枝分叉处的那个点。

2.Js Dom 编程

差不多就是利用document(代表着浏览器中打开的文档)对象，来对网页中形成的dom树进行操作，操作其节点。

也就是用js来操作html中的各元素。

3.document中的常用方法：

getElementById():根据id获得唯一的元素；
getElementsByTagName();根据标记名获得所有此标识元素
getElementsByName();根据组件名获得所有元素
getElementsByClassName():根据类名来获得所有元素

parentElement:父元素
children:所有子元素的集合
previousElementSibling:前一个兄弟元素
nextElementSibling:前一个兄弟元素

进行操作(curd)常用方法：

createElement():创建一个元素；

appendChild():将一个元素追加到当前的元素中；
insertBefore();将一个元素插入到另一个元素之前
removeChild():删除子元素

replaceChild();替换子元素

insertAdjacentHTML(position,html):将一个html片断插入到某个元素的指定位置a，

位置有四个值 beforeBegin,afterBegin,beforeEnd,afterEnd;

简单实例：

<html>  
    <head>  
    <script language="javascript">  
        function test(){  
            document.write("hello,world");  
        }  
    </script>  
    </head>  
    <body>  
        <input type="button" value="点击" id="but_1">  
        <script language="javascript">  
            document.getElementById("but_1").οnclick=test;
       </script>  
   </body>  
</html>

2.二级省市联动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript"> 
    
    function getCity(){
        var citys = [[],["呼市","锡市","包头"],["哈尔滨","大庆","牡丹江","佳木斯"],["大理","丽江","昆明"]];            
    
        var province = document.getElementById("province");
        var index =  province.selectedIndex;
        var  city= citys[index];
        var cityNode = document.getElementById("city");
        var children = cityNode.childNodes;
        for(var i = 0; i<children.length ;){
            cityNode.removeChild(children[i]); //删完i自动+1
        }
        cityNode.options.length = 1 ；
        for(var i = 0; i<city.length ; i++){
            var option = document.createElement("option");
            option.innerHTML = city[i];
            cityNode.appendChild(option);
        }
    }
    
</script>
</head>
<body>
    省份<select id="province" οnchange="getCity()">
            <option>省份</option>
            <option>内蒙古</option>
            <option>哈尔滨</option>
            <option>云南</option>
        </select>
    城市<select id="city"><option>城市</option></select>
    
</body>
</html>

b9x_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS学习总结（二）- Dom编程

1.关于DOMDocument Object Model(文档对象模型)。多用来处理和表示HTML和XML文档。DOM是针对xml、html的基于树的API。DOM树定义了节点Node的接口以及许多节点类型来表示文档不同功能不同方面的节点。DOM结构理解为树型结构，节点就是树枝分叉处的那个点。2.Js Dom 编程差不多就是利用document(代表着浏览器中打开的文
复制链接

扫一扫

专栏目录