学习JavaScriptday04

最新推荐文章于 2024-01-31 00:30:29 发布

Dc_高

最新推荐文章于 2024-01-31 00:30:29 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/baidu_39105268/article/details/80638931

版权

对HTML标签的增删改查操作

1.查找页面中的元素，可以通过id查询页面元素，通过元素名称查询，通过层级关系查询，通过name属性值查询

1.1通过id查找

var p = document.getElementById("pid");

1.2通过标签名称查找

var inputs = document.getElementsByTagName("input");

1.3通过层级关系查找：元素.childNodes,获取当前元素内部所有内容，包括文本内容和元素内容

var nodes = p.childNodes;

1.4获取元素的上级元素，格式为：元素名.parnetElement

var div = p.parentElement;

1.5获取兄弟元素，先找到上级在找兄弟，(先找它爸爸元素，再找儿子，爸爸只有一个，儿子可以有很多个)

var nodes2 = p.parentElement.childNoes;

1.6通过name属性获取元素

var inputs = document.getElementsByName("gender");

2.往页面中添加新的元素

var li = document.createELement("li");

2.1元素中添加子元素，需要先得到父元素，和创建新元素

父元素.appendChild("新元素");

onloa = function(){
   var newDiv = document.createElement("div");//创建一个新的元素div
   newDiv.innerText = "新的div";//给新的div设置元素内容
   document.body.appendChild(newDiv);//将newDiv元素添加到body中去
}

添加之后

小练习：页面中准备一个文本框和按钮，通过无序列表显示北京，上海，广州，在点击按钮后在广州后面添加内容

<script type="text/javascript">
function add(){
    //先得到用户输入的内容
    var input = document.getElementById(""muinput);
    //在新建一个li标签
    var myLi = document.createElement("li");
    //将用户输入的内容添加到li中
    myLi.innerText = input.value;
    //然后要找到ul元素
    var myUl = document.getElementsByTagName("ul")[0];//返回的是一个数组，ul标签不止一个，[0]表示获得第一个ul元素开始找
    //最后把li添加到ul里面
    myUl.appendChild(myLi);
}
</script>
<body>
	<input type="text" id="myinput">
	<input type="button" value="添加" οnclick="add()">
	<hr>
	<ul>
		<li>北京</li>
		<li>上海</li>
		<li>广州</li>
	</ul>
</body>

3.插入元素需要先得到父元素和它的下个元素(弟弟元素)

父元素.insertBefore(新元素，弟弟元素);

4.删除元素

父元素.removeChild("被删除的元素");

根据上面的小练习继续延伸，添加插入和删除功能

<script type="text/javascript">
//添加内容
function add(){
    //先得到用户输入的内容
    var input = document.getElementById(""muinput);
    //在新建一个li标签
    var myLi = document.createElement("li");
    //将用户输入的内容添加到li中
    myLi.innerText = input.value;
    //然后要找到ul元素
    var myUl = document.getElementsByTagName("ul")[0];//返回的是一个数组，ul标签不止一个，[0]表示获得第一个ul元素开始找
    //最后把li添加到ul里面
    myUl.appendChild(myLi);
}

//插入内容
function insert(){
    //得到用户输入的内容
    var input =document.getElementById("myiput");
}
    //创建li标签
    var  newli = document.createElement("li");
    //给li添加内容
    newli.innerText = input.value;
    //得到它的上级元素，它爸ul
    var ul = document.getElementsByTagName("ul")[0];
    //得到它的同级元素，它弟li
    var oldli = document.getElementById("sh");
    //把li添加到ul中
    ul.insertBefore(newli,oldli);//把你在输入框中输输入的内容插入到它弟上面

//删除内容
function deleteli(){
    //先得到被删除的元素和被删除元素的上级,(等于是找到它爸和它自己)
    var shli = document.getElementById("sh");
    //找到它爸
    var ul = document.getElementsByTagName("ul")[0];
    //删除上级元素下的shli子元素，如果不加Child就是将子元素全部删除
    ul.removeChild(shli);

}
</script>

<body>
	<input type="text" id="myinput">
	<input type="button" value="添加" οnclick="add()">
        <input type="button" value="插入" οnclick="insert()">
	<input type="button" οnclick="deleteli()" value="删除">
	<hr>
	<ul>
		<li>北京</li>
		<li id="sh">上海</li>
		<li>广州</li>
	</ul>
</body>

没添加之前：

添加内容后：

插入内容后：

删除内容后：

练习题：页面中准备两个下拉选，然后通过下拉选选择省，从而找到相对应的市

<script type="text/javascript">
	var cities = [["唐山","秦皇岛","邯郸"],
					["哈尔滨","齐齐哈尔","佳木斯"],
					["苏州","南京","江阴"],
					["合肥","黄山","芜湖"],
					["上海"]];
  
function changeAction(){
    //得到显示省的select
    var s1 = document.getElemntById("s1");
    //得到用户选择省的数组下标
    var index = s1.value;
    //通过下标找到对应的城市信息
    var cityArr = cities[index];
    //得到s2，为了往里面添加内容
    var s2 = document.getElementById("s2");
    //清除之前s2中的内容，要放在判断之前，添加一个option请选择，覆盖掉原来s2里面的值
    s2.innerHTML="<option>请选择</option>";
    //判断选择的省份是否是"请选择"，因为请选择时s2是没有市内容的
    if(cityArr){
        //遍历选择的每一个城市
        for(var i=0;i<cityArr.length;i++){
            //得到每一个城市的昵称
            var city = cityArr[i];
            //创建option元素，把city放进去
            var opt = document.createElement("option");
            //将每个城市的昵称city放到option中
            opt.innerText = city;
            //将创建的option添加到s2中
            s2.appendChild(opt);
        }
    }
}
</script>

<body>
	<select οnchange="changeAction()" id="s1">
		<option>请选择</option>
		<option value="0">河北</option>
		<option value="1">黑龙江</option>
		<option value="2">江苏</option>
		<option value="3">安徽</option>
		<option value="4">上海</option>
	</select>
	<select id="s2">
		<option>请选择</option>
	</select>
</body>

效果图如下：

Dc_高

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习JavaScriptday04

对HTML标签的增删改查操作1.查找页面中的元素，可以通过id查询页面元素，通过元素名称查询，通过层级关系查询，通过name属性值查询1.1通过id查找var p = document.getElementById("pid");1.2通过标签名称查找var inputs = document.getElementsByTagName("input");1.3通过层级关系查找：元素.childNo...
复制链接

扫一扫