Dom基础小例子
作者：互联网
实现全选和反选
<head>
<meta charset="utf-8" />
<title>8.13-Laoshanshan</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="checkbox" onclick="selectall(this)"/>全选<br>
<input type="checkbox" class="kuang"/>学习<br>
<input type="checkbox" class="kuang"/>java<br>
<input type="checkbox" class="kuang"/>js<br>
<input type="checkbox" class="kuang"/>html<br>
<a href="#" onclick="selectnone">反选</a>
<script type="text/javascript">
function selectall(qxk){
var checked = qxk.checked; //获取qxk的checked属性，即是否被选中
var checkboxes = document.getElementsByClassName("kuang");//获取全部节点属性
for(var i in checkboxes){ //所有子选项的点击属性必须和全选框同步
checkboxes[i].checked=qxk.checked;
}
}
function selectnone(){
var checkboxes = document.getElementsByClassName("kuang");
for(var i in checkboxes){
checkboxes[i].checked=!checkboxes[i].checked;
}
}
</script>
nodetype
- 元素节点、属性节点、内容节点
<div id="d1">
</div>
<p id="p1">
</p>
<script type="text/javascript">
var div1=document.getElementById("d1");
console.log(div1.nodeType); //1 元素节点都为1
var p1 = document.getElementById("p1");
console.log(p1.nodeType);
console.log(div1.attributes[0].nodeType);//2 属性节点都为2
- 获取子节点内容
<body>
<div id="d1">
冰美式才是真谛
</div>
<script type="text/javascript">
var div1=document.getElementById("d1");
// console.log(div1.nodeType); //1 元素节点都为1
var content = div1.childNodes[0]; //获取div的子节点div只有一个子节点
console.log(content.nodeName); //#test :文本节点
console.log(content.nodeValue);
console.log(content.nodeType); //3
content.nodeValue="abcdefg"; //修改文本内容
</script>
获取父节点
<body>
<div id="dad">
父
<div id="f1">
子节点1
</div>
<div id="f2">
子节点2
<div id="f3">
子节点2的子节点
</div>
</div>
<button type="button" onclick="f()">获取父节点</button>
</div>
<p id="p1">
</p>
<script type="text/javascript">
var node = null;
function f(){
node=document.getElementById("dad")
}
if(document==node){
alert("当前节点为根节点：document");
}else{
alert(node.parentNode);
node = node.parentNode;
}
</script>
</body>
子节点
文本中的换行、回车、元素都算子节点
<body>
<div id="baba">
我是爸爸
<div id="d1">
我是大儿子
</div>
<div id="d2">
我是二儿子
</div>
<div id="d3">
我是小儿子
</div>
</div>
<button type="button" onclick="showfirst()">第一个子节点</button>
<button type="button" onclick="showlast()">最后一个子节点</button>
<button type="button" onclick="showall()">子节点数量</button>
<script>
function showfirst(){
var div = document.getElementById("baba");
alert(div.firstChild.nodeName);
}
function showlast(){
var div = document.getElementById("baba");
alert(div.lastChild.nodeName);
}
function showall(){
var div = document.getElementById("baba");
alert(div.childNodes.length);
}
</script>
</body>
查询所有父节点
</head>
<body>
<div id="d1">
1
<div id="d2">
2
<div id="d3">
3
</div>
</div>
<div id="d4">
4
</div>
</div>
<button type="button" onclick="f()">子节点</button>
<script>
var node = null;
function f(){
if(null==node){
node=document.getElementById("d2");
}
if(document==node){
alert("当前节点为根节点:document");
}else{
alert(node.parentNode.nodeName);
node = node.parentNode;
}
}
</script>
</body>
查到最后一个会显示根节点
innerHTML填充
<body>
<div id="d1">
原来的内容
</div>
<button type="button" onclick="f()">点一下覆盖原子节点内容</button>
<script>
function f() {
var d1 = document.getElementById("d1");
d1.innerHTML="新的内容"; //innerHTML填充会导致该div中原有的子节点都被覆盖
}
</script>
</body>
节点增加 createElenment
<body>
<div id="d1">
不要熬夜
<button type="button" onclick="add()">子节点</button>
</div>
</div>
<script>
function add(){
var hr = document.createElement("hr"); //hr为页面分割线
var div1 = document.getElementById("d1");
div1.appendChild(hr);
}
</script>
</body>
创建文本节点
<body>
<div id="d1">
不要熬夜
<button type="button" onclick="add()">节点</button>
</div>
</div>
<script>
function add(){
var p = document.createElement("p"); //hr为页面分割线
var text = document.createTextNode("通过dom添加的文本");
p.appendChild(text);
var d1 = document.getElementById("d1")
d1.appendChild(p);
}
</script>
</body>
增加超链接
<body>
<div id="d1">
<button type="button" onclick="add()">增加超链接</button>
</div>
<script>
function add(){
var a = document.createElement("a");
var content = document.createTextNode("百度一下,你就知道");
a.appendChild(content);
var href = document.createAttribute("href");
href.nodeValue="https://www.baidu.com";
a.setAttributeNode(href);
var div1 = document.getElementById("d1");
div1.appendChild(a);
var img = document.createElement("img");
var src = document.createAttribute("src");
src.nodeValue="img/ikun.gif";
img.setAttributeNode(src);
var div1 = document.getElementById("d1");
d1.appendChild(img);
}
</script>
</body>
删除节点
<script>
function shanchu(){
var div1 = document.getElementById()("d1"); //获取父节点
var img = document.getElementById("j"); //要删除的元素的id
div1.removeChild(img); //删除但源代码没改重新加载，此元素还会出现
}
</script>
- 属性节点删除 removeAttribute(属性节点对象)
- 文本节点删除 removeChild();
隐藏
<body>
<div id="d1">
假装有内容
</div>
<button type="button" onclick="hide()">隐藏</button>
<button type="button" onclick="show()">显示</button>
</div>
<script>
function hide(){
var d1 = document.getElementById("d1");
d1.style.display="none";
}
function show(){
var d1 = document.getElementById("d1");
d1.style.display="block";
}
</script>
</body>
- 例
<body>
<div id="d1">
<button type="button" onclick="width()">变宽</button>
<button type="button" onclick="height()">变高</button>
<button type="button" onclick="color()">变色</button>
<button type="button" onclick="hide()">隐藏</button>
<button type="button" onclick="reset()">重置</button>
<div id="d2" style="width: 200px; height: 200px; background-color: black;">
</div>
</div>
<script>
function width(){
var d = document.getElementById("d2");
var as = d2.attributes;
as[1].nodeValue="width: 300px; height: 200px; background-color: black;";
}
function height(){
var d = document.getElementById("d2");
var as = d2.attributes;
as[1].nodeValue="width: 200px; height: 300px; background-color: black;";
}
function color(){
var d = document.getElementById("d2");
var as = d2.attributes;
as[1].nodeValue="width: 200px; height: 200px; background-color: red;";
}
function hide(){
var d = document.getElementById("d2");
d.style.display="none";
}
function reset(){
var d = document.getElementById("d2");
var as = d2.attributes;
as[1].nodeValue="width: 200px; height: 200px; background-color: black;";
}
</script>
</body>
- 例
<body>
用户:<input type="text" id="username" />
密码:<input type="password" id="passwd" />
<button type="button" onclick="printInfo()">打印</button>
<button type="button" onclick="denglu()">登陆验证</button>
<script>
function printInfo(){
var input1 = document.getElementById("username");
var input2 = document.getElementById("passwd");
alert(input1.value);
alert(input2.value);
}
// 验证方法 如果用户名为gls 密码为123 则显示
// 正确 否则显示错误 如果用户名或密码的长度为0
// 要求重新输入
function denglu(){
var input1 = document.getElementById("username");
var input2 = document.getElementById("passwd");
if(input1.value.length==0||input2.value.length==0)
{
alert("用户名密码长度有误!");
return;
}
if(input1.value=="gls"&&input2.value=="123"){
alert("登陆成功");
location.href="https://www.baidu.com";
return;
}else{
alert("用户名或者密码错误");
return;
}
}
焦点事件
每一个组件都有两个事件：失去焦点和获取焦点。当节点获取焦点的时候会触发onfocus,失去则触发onblur
<input type="text" id="input1" onfocus="f()"
onblur="b()"
placeholder="输入框1"/>
<br>
<input type="text" id="input2" placeholder="输入框2" />
<div id="d1">
function f(){
document.getElementById("d1").innerHTML="输入框1获取了焦点";
}
function b(){
document.getElementById("d1").innerHTML="输入框1失去了焦点";
}
鼠标事件
- 鼠标按下触发onmousedown事件
- 鼠标弹起触发onmouseup事件
- 鼠标经过触发onmousermove
- 鼠标进入触发onmouseover
- 鼠标退出触发 onm ouseout
<body>
<input type="button" onm ousedown="down()" onm ouseup="up()" value="鼠标按下和弹起"/>
<br>
<input type="button" onm ousemove="move()" value="鼠标经过"/>
<br>
<input type="button" onm ouseover="over()" value="鼠标进入" />
<br>
<input type="button" onm ouseout="out()" value="鼠标退出" />
<br>
<div id="d1">
</div>
<script>
var number = 0;
var number1 = 0;
function down(){
document.getElementById("d1").innerHTML="按下了鼠标";
}
function up(){
document.getElementById("d1").innerHTML="弹起了鼠标"
}
function move(){
document.getElementById("d1").innerHTML="鼠标经过次数"+(++number);
}
function over(){
document.getElementById("d1").innerHTML="鼠标进入次数"+(++number1);
}
function out(){
document.getElementById("d1").innerHTML="鼠标退出";
number = 0;
nubmer1 = 0;
}
</script>
</body>
双击事件 ondblclick
<div class="d1">
</div>
<div class="d1">
</div>
<div class="d1">
</div>
<button type="button" ondblclick="cc()">嗯?</button>
变化事件 onchange
- 当组件的值在发生变化的时候，会触发onchange事件
<body>
<input type="text" id="input1" onm ouseup="change()" value=""/>
<br>
<br>
<input type="button" value="用来使输入框失去焦点的按钮" />
<br>
<br>
<div id="d1">
</div>
<script>
function change(){
var d1 = document.getElementById("d1");
var input1 = document.getElementById("input1");
d1.innerHTML="输入框的值变成了："+input1.value;
}
</script>
</body>
把html中的各种元素当作对象来操作，或者叫做元素节点对象
- 两种获取对象的方法
<head>
<meta charset="utf-8" />
<title>8.13-Laoshanshan</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
Dom
</div>
<h1 class="c1">演示1</h1>
<h2 class="c1">演示2</h2>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
- js代码
window.onload = function(){ //此处的代码会等待所有html元素加载完毕后再运行
var div1 = document.getElementById("d1"); //获取id为d1的元素节点对象
console.log(typeof div1);
var divs = document.getElementsByTagName("div");
console.log(divs.length);
}
- 获取对象方法3
<body>
<div id="d1">
Dom
</div>
<h1 class="c1">演示1</h1>
<h2 class="c1">演示2</h2>
</body>
window.onload = function(){
var elements = document.getElementsByClassName("c1")
for(var i=0;i<elements.length;i++){
console.log(typeof elements[i]+",这是数组中的第"+i+"个元素")
}
}
属性节点获取
- html
<head>
<meta charset="utf-8" />
<title>8.13-Laoshanshan</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1" style="width: 100;height: 50px; background-color: brown;";> //两个属性为id和style
</div>
<button type="button" onclick="changecolor()">按钮</button>
</body>
- js
function changecolor(){
var d1=document.getElementById("d1");
as = d1.attributes;
console.log(as.length) //将d1元素的属性节点进行陈列
d1.style.backgroundColor="blueviolet" //将原来属性颜色改为blueviolet，点击按钮变色
d1.style.width="100px"; //修改宽度
}
d1有两个元素：
修改属性
window.onload = function(){
var d1=document.getElementById("d1"); //获取节点
var as = d1.attributes;
console.log(as[0].nodeName); //获取节点名
console.log(as[0].nodeValue); //获取节点值
console.log(as[1].nodeName);
console.log(as[1].nodeValue);
as[1].nodeValue="background:grey;height:100px;width:100px"; //修改属性，必须全改
}
标签：function,Dom,基础,getElementById,例子,var,document,节点,d1 来源： https://www.cnblogs.com/arica/p/16490266.html