JavaScript04—DOM

最新推荐文章于 2024-07-15 14:11:16 发布

阿鑫君_ty

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量331

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34807258/article/details/74474629

版权

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM：Document Object Model(文档对象模型)

节点的读取修改
- nodeName：节点名称
- nodeType：节点类型——元素1，属性2，文本3，注释8，文档9
- innerText：标签内的文本
- innerHTML：标签内的HTML
节点属性
- getAttribute(属性名)：根据属性名称获取属性值
- setAttribute(属性名，属性值)、removeAttribute(属性名)

<p id="p1" class="pwd"></p> 
var p1 = document.getElementById("p1");
p1.getAttribute("class");
p1.setAttribute("class","pwd2");
p1.getAttribute("class");
//结果：pwd ,pwd2

查询节点
- 通过id查询：document.getElementById(“id”)
- 通过节点关系查询：parentNode查找单个父节点，childNodes查找多个子节点
- 通过标签名称查询：document.getElementsByTagName(“标签名称”)
- 通过name属性查询：document.getElementsByName(“class名”)
- 查询到多个元素则返回数组
增加节点
- 创建新节点：document.createElement(“元素标签名称”)
- 添加新节点：parentNode.appendChild(“新节点”) /parentNode.insertBefore(“新节点”,”原有节点”)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加节点</title>
<script type="text/javascript">
function add(){
    //1. 创建节点
    var node = document.createElement("input");
    node.type = "text";
    node.value = "Mary";
    node.style.color = "red";

    //2. 添加节点
    var ary = document.getElementsByTagName("body");
    var parent = ary[0];    //获取到的数组
    parent.appendChild( node );
}
</script>
</head>
<body>
    <input type="button" value="添加一个节点" onclick="add();"/>
</body>
</html>

删除节点
node.removeChild(“子节点”)

联动菜单（省市）

创建省、市下拉选项，当省份改变时重置市

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>省市级联菜单</title>
    <script type="text/javascript">
        //在window对象中，定义数组变量
        var ary = new Array();
        ary[0] = ["请先选择省"];
        ary[1] = ["南京", "徐州", "连云港", "宿迁", "盐城", "扬州"
            , "淮安", "苏州", "常州", "镇江", "无锡"]; //江苏
        ary[2] = ["济南", "青岛", "临沂", "泰安", "东营", "日照"]; //山东
        ary[3] = ["郑州", "商丘", "平顶山", "开封", "洛阳", "信阳" ]; //河南

        function showCities(){
            //1. 获得选择的省份
            //console.log("省份有变化！");
            var sel1 = document.getElementById("sel1");
            var index = sel1.selectedIndex;
            //console.log("选择了：" + index );

            var cities = ary[index];
            console.log( cities );

            // 获得市的下拉列表
            var sel2 = document.getElementById("sel2");

            //2. 将城市列表先清空一下
            /*//不能在for循环中直接移除元素，因为数据的长度在不断的变小
             var opts = sel2.options;
             for( var i=0; i<opts.length; i++ ){
             var opt = opts[i];
             sel2.removeChild( opt );
             }*/
            while( sel2.options.length > 0 ){
                sel2.removeChild( sel2.firstChild );
            }

            //3. 使用城市名，创建<option>节点，添加到sel2中
            for( var i=0; i<cities.length; i++ ){
                // 取出每个城市名
                var city = cities[i];
                // 创建新节点<option>
                var opt = document.createElement("option");
                // 将城市名填入到<option>标签的innerHTML中
                opt.innerHTML = city;
                // 将新节点，添加到sel2中
                sel2.appendChild(opt);
            }

        }

        function showCities2(){
            var sel1 = document.getElementById("sel1");
            var index = sel1.selectedIndex;
            var cities = ary[index];

            var sel2 = document.getElementById("sel2");
            sel2.options.length = 0; //清空所有选项

            for( var i=0; i<cities.length; i++ ){
                var city = cities[i];
                var opt = new Option(city);
                sel2.add( opt );
            }
        }
    </script>
</head>
<body>
<h1>请选择收货地址</h1>
省
<select id="sel1" onchange="showCities2();">
    <option>--请选择--</option>
    <option>江苏省</option>
    <option>山东省</option>
    <option>河南省</option>
</select>
&nbsp;&nbsp;

市
<select id="sel2">
    <option>--请先选择省--</option>
</select>
</body>
</html>