js有关dom操作学习
dom对象就是操作网页的document
dom节点：
整个文档是一个文档节点(document对象)
每个 HTML 元素是元素节点(element 对象)
HTML 元素内的文本是文本节点(text对象
每个 HTML 属性是属性节点(attribute对象)
注释是注释节点(comment对象)
dom查询：
获取元素节点
# getElementById() 通过id获取一个元素节点
# getElementByTagName() 通过标签名获取一组元素节点对象
# getElementByClassName() 通过类名获取一组元素节点对象
# getElementByName() 通过name属性获取一组元素节点对象
获取和设置document内容
.inhteml=newhtml
节点属性
attributes - 节点（元素）的属性节点
nodeType – 节点类型
nodeValue – 节点值
nodeName – 节点名称
innerHTML - 节点（元素）的内容
innerText -节点（元素）的文本值
导航属性：
parentNode - 节点（元素）的父节点 (推荐)
firstChild – 节点下第一个子元素
lastChild – 节点下最后一个子元素
childNodes - 节点（元素）的子节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
dom操作内联样式：
// 元素.style.样式名 = 样式值
// 如果css样式名中有 - ，如background-color，需要将这种样式名修改为驼峰命名法
box1.style.width = "300px"
box1.style.height = "300px"
box1.style.backgroundColor = "#f2f2f2"
# 获取当前样式
box1.currentStyle.width
getCompyteStryle(box1.null)这个方法获取当前的样式,需要两个参数一个获取样式的参数，一个传递伪参数，一般都传递null
var obj=getComputedStyle(box01,null);
# 定义一个函数 getStyle
<script type="text/javascript">
/*
定义一个函数，用户获取指定元素的当前样式
两个参数：obj要获取的元素,name 要获取样式的名字
*/
function getStyle(obj,name){
if (window.getComputedStyle){
return getComputedStyle(obj,null)[name]
}else{
return obj.currentStyle(name)
}
}
window.onload=function (){
var box1=document.getElementById('box1');
var btn01=document.getElementById('btn01');
btn01.onclick=function (){
getStyle(box1,"width")
alert(getStyle(box1,"width")) }
}
</script>
文档节点：整个HTML文档
元素节点： HTML文档中的HTML标签；
属性节点：元素的属性
文本节点： HTML标签中的文本内容
<p id="pid">this is </p>
节点属性：
<script type="text/javascript">
// console.log(document);
//获取button对象
var btn=document.getElementById('btn')
// 修改按钮的的文本
btn.innerHTML='Ian button'
</script>
事件
把js直接写在HTML中： 造成代码结构耦合
/*
* 可以为按钮的对于事件绑定处理函数的形式来处理事件
*/
// 绑定回调函数，等等处理才执行的函数
btn.onclick=function (){
alert("你还点")
执行顺序问题解决“
<script type="text/javascript">
/* 浏览器在加载一个页面的时候，是自上向下执行的 ，造成ls无法获取DOM对象，解决方式就是
引入onload，它会在整个页面加载完成触发
*/
//添加onload触发事件
window.onload=function (){
var btn=document.getElementById("btn");
//为btn添加一个点击事件
btn.onclick=function (){
alert("还点击我");
};
};
</script>
DOM查询
获取文本 .innerHTML
//* 4 获取city节点所有li节点
var btn04=document.getElementById('btn04');
btn04.onclick=function () {
//*获取ID=city的节点
city = document.getElementById('city');
//获取city节点所有li的节点
lis = city.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
console.log(lis[i].innerHTML);
}
}
//5 获取city节点的所有子节点
var btn05=document.getElementById('btn05');
console.log(btn05.innerHTML)
btn05.onclick=function (){
city=document.getElementById('city');
//获取city节点的所有子节点
cds=city.childNodes;
console.log(cds.length);
for (var i=0;i<cds.length;i++){
console.log(cds[i])
}
// children返回子元素
cds2=city.children
console.log(cds2)
}
//6 获取phone节点第一个节点
var btn06 =document.getElementById('btn06')
btn06.onclick=function (){
var phone=document.getElementById('phone')
//获取第一元素
var fec=phone.firstElementChild
console.log(fec)
//获取第一个节点
var fc=phone.firstChild
console.log(fc)
//获取当前节点的子节点
var cn=phone.childNodes;
console.log(cn[0])
// 获取当前节点的最后一个节点
var lc=phone.latElementChild
console.log(lc)
}
定义函数实现定向功能：
/*定义一个函数，专门用指定的元素绑定点击事件
参数：idStr 要绑定点击响应行的对象 id属性值
fun 事件的回调函数，当单击元素时，该函数将会被处理
*/
function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.onclick=fun;}
window.onload=function (){
//获取body标签
var body=document.body;
console.log(body);
var de=document.documentElement;
console.log(de);
//
all = document.getElementsByTagName("*");
console.log(all)
//根据元素的class属性查询一组元素节点对象
var a1=document.getElementsByClassName("a1");
console.log(a1[0])
//获取document.querySelector()需要一个选择器字符串作为参数，可以根据一个css选择器查询一个元素节点对象--
var div = document.querySelector(".a1 div")
DOM对象增删改
节点的元素的增删和改
<script type="text/javascript">
function myClick(idStr,fun){
btn=document.getElementById(idStr)
btn.onclick=fun;
}
window.onload=function (){
//1 创建一个"深圳"节点，添加到#city下
//执行点击btn01的的点击事件
myClick("btn01",function (){
//创建li元素的节点创建一个元素节点对象,将创建好的对象作为返回值
var li=document.createElement('li')
console.log(li)
// 建一个文本节点对象,并返回新的节点
var sz=document.createTextNode("深圳")
console.log(sz)
// 将text设置为li的子节点
// appendChild()向父结点中添加子节点-->
li.appendChild(sz)
console.log(li)
//获取city的节点
var city=document.getElementById('city')
city.appendChild(li)
console.log(city)
})
//2 将"深圳"节点添加到#bj前面
// .insertBefore(插入的子节点,插入位置的子节点)在指定的子节点前插入新的子节点
myClick("btn02",function (){
//
var li=document.createElement("li")
var text=document.createTextNode("深圳")
li.appendChild(text)
var city=document.getElementById("city")
var bj=document.getElementById('bj')
city.insertBefore(li,bj)
console.log(city)
})
//3 使用"深圳"节点替换#bj节点 .replaceChild(A,B) 用A节点替换B节点
myClick("btn03",function (){
var li=document.createElement("li")
var text=document.createTextNode("深圳")
li.appendChild(text)
var city=document.getElementById("city")
var bj=document.getElementById('bj')
city.replaceChild(li,bj)
})
//4删除#bj节点 removeChild(bj)删除子节点
myClick("btn04",function (){
var city=document.getElementById("city")
var bj=document.getElementById('bj')
// city.removeChild(bj)
bj.parentNode.removeChild(bj)
})
//5读取#city内的html代码
myClick("btn05",function (){
var city=document.getElementById('city')
alert(city.innerHTML)
})
//6设置#bj内的html代码
myClick("btn06",function (){
var bj=document.getElementById('bj')
bj.innerHTML="昌平"
})
//7创建一个"顺义"节点，添加到#city下2
myClick("btn07",function (){
var city=document.getElementById("city")
var li= document.createElement("li")
li.innerHTML="顺义"
city.appendChild(li)
})
}
</script>
</head>
记录的增删改查
// 单击响应的函数
function dela(){
//点击一行获取 改行指向，获取父节点的父节点；
var tr=this.parentNode.parentNode;
var name=tr.children[0].innerHTML
if(confirm("确认删除"+name+"吗?")) {
tr.parentNode.removeChild(tr)
}
// 点击超级链接后，会跳转,去掉
return false;
//1 点击触发删除的
window.onload=function (){
// 1.1 //点击超链接，删除一个员工信息
//获取标签a节点
var alla=document.getElementsByTagName('a')
// 遍历a节点，为每个超级链接绑定一个单击的响应函数
for (var i=0;i<alla.length;i++) {
alla[i].onclick = dela;
}
// 点击提交，把输入框记录增加表格中
//2 点击提交按钮，增加记录
}
//2.1 首先获取提交按钮的提交点击事件回调函数
var addbtn=document.getElementById('addEmpbutton')
addbtn.onclick=function (){
// 获取input
//2.2获取所有input标签
var namelist=document.getElementsByTagName('input')
//2.3 创建tr元素
var tr=document.createElement('tr')
// 2.3 读取input内容并创建td标签，添加文本，通过appendChild添加tr
for (var i=0;i<namelist.length;i++){
console.log(namelist[i].value);
var td=document.createElement('td');
td.innerHTML=namelist[i].value;
tr.appendChild(td);
namelist[i].value=""
}
//2.4 创建td 标签和a标签
var td=document.createElement('td');
var a =document.createElement('a');
var delText=document.createTextNode("Delete");
a.appendChild(delText)
td.appendChild(a)
tr.appendChild(td);
a.href="javaScript"
a.onclick =dela;
var et=document.getElementById("employeeTable");
var tb=et.getElementsByTagName("tbody")[0];
tb.appendChild(tr);
}
