<html>
<head>
<meta charset="utf-8">
<title>Dom操作</title>
<script type="text/javascript" src="08.16/08.16.js"></script>
</head>
<body>
<!--dom节点添加 删除 ;
createElemen 创建一个新的节点
appendChild(newNode) 将newNode添加成当前节点的最后一个子节点
insertBefore(newNode,refNode) 将refNode节点之前插入newNode节点
replaceChild(newNode,oldNode) 将oldNode节点替换成newNode节点
removeChild(oldNode) 将oldNode子节点删除
cloneNode(true // false) 当deep为true时，表示复制当前节点以及当前结点的全部后代节点。为false时，只复制当前节点
-->
<form id="myform" action="https://www.baidu.com/" method="get" target="_blank">
<input name="username" type="text" value="张三"><br>
<input name="password" type="text" value="123"><br>
<select name="city">
<option value="shanghai">上海</option>
<option value="beijing" selected>北京</option>
</select><br>
<input type="button" value="获取表单内第一个控件" onClick="alert(document.getElementById(‘myform‘).elements[0].value);">
<input type="button" value="获取表单内第二个控件" onClick="alert(document.getElementById(‘myform‘).elements[‘password‘].value);">
<input type="button" value="获取表单内第三个控件" onClick="alert(document.getElementById(‘myform‘).city.value);">
<input type="button" value="操作表单" onClick="operatorForm()">
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Dom操作内容</title>
<style>
#in_divall{
background-color: antiquewhite;
}
</style>
</head>
<body>
<!--
操作内容
表单；
赋值；标签对象.value=""；
取值；标签对象.value
非表单；
取值；
innerHTML返回的是标签内的HTML内容.包含HTML标签
innerText返回的诗标签内的文本值不包含HTML标签
操作属性
标签对象.getAttribute （’属性名‘） 获取指定属性的值
return返回值
标签对象.setAttribute(‘属性名‘，‘属性值’)设置修改获取属性的值
标签对象.removeAttribute（‘属性名‘） 删除制定属性
操作样式（只能操作内联 姐就是行内）
标签对象.style.样式名（获取样式名的值）
标签对象.style.样式名（获取样式名的值）=样式值
-->
<input type="text" id="ueser" value="">
<button onClick="huiqu()">提交</button>
<button onClick="fuzhi()">赋值</button>
<div id="fei_div" style="width: 200px;height: 100px;background-color: aquamarine;">这是表单获取的值。
</div>
<p id="p_span"><span>这是一个嵌套标签</span></p>
<a href="#" target="_self" id="a_in" onClick="getAtr()">这是一个A连接</a>
<div id="in_divall" onClick="div_click()" style="width: 500px;height: 100px;"></div>
<button onClick="div_huiqu()">提交</button>
<button onClick="div_fuzhi()">赋值</button>
</body>
</html>
<script>
function div_click(){
// 获取DIV的宽度
var div_style = document.getElementById(‘in_divall‘);
var ststylecolor =div_style.style.width;
console.log(stylecolor);
div_style.style.width = 1000px;
div_style.style.backgroundColor = red;
}
function getAtr(){
var aaa=document.gatElementById(‘a_in‘);
//获取属性 属性名
// console.log(aaa.getAttribute(‘type‘));
// 设置属性 属性名+属性值
// var setAtr = aaa.getAttribute(‘target‘,‘_blank‘);
// 删除属性 属性名
var remAtr = aaa.removeAttribute(‘id‘);
}
//表单获取值
function huoqu(){
// 一.首先要获取到输入框
var ueser = document.getElementById(‘ueser‘);
// 二.获取值
console.log(ueser.value);
}
//表单赋值
function fuzhi(){
// 一.首先要获取到输入框
// 二.赋值
document.getElementById(‘ueser‘).value=‘李四‘;
}
// 非标单获取值
function div_huoqu(){
// 一。获取输入框的值
var dicy = document.getElementById(‘p_span‘);
console.log(dicy.innerText);
}
//非标单赋值
function div_fuzhi(){
var dicy = document.getElementById(‘fei_div‘);
console.log(dicy.innerHTML ="这是新的表单获取值");
}
</script>
原文地址：https://www.cnblogs.com/ZDSGWXS233/p/11371627.html
时间： 2025-01-07 10:43:05