手机扫码查看
2020javaweb教程之JavaScript的DOM2
DOM概述：
通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
浏览器加载 HTML 时,会将所有的 HTMl 标签封装成对象(标签对象),称为节点(Node),并悬挂在树状结构中
在HTML中，一切都是节点
元素节点：HTML标签。
文本节点：标签中文字(比如标签之间的空格、换行)
属性节点：标签的属性
各节点的关系体现为：父子关系/兄弟关系
通过可编程的对象模型，js获得了足够的能力来创建动态的HTML：
JavaScript 能够改变页面中的所有 HTML 元素。
JavaScript 能够改变页面中的所有 HTML 属性。
JavaScript 能够改变页面中的所有 CSS 样式。
JavaScript 能够对页面中的所有事件做出反应。
DOM的节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1.nodeName：节点的名称
<script type="text/javascript"> console.log(document.body.nodeName); console.log(document.body.attributes[0].nodeName); console.log(document.getElementById("body").childNodes[0].nodeName); </script>
2.nodeValue：节点的值
<body id="body">
<a href="#" name="a" id="aid">测试</a>
<script type="text/javascript">
//元素节点的 nodeValue 是 undefined 或 null
console.log(document.head.nodeValue);
//文本节点的 nodeValue 是文本自身
console.log(document.getElementById("aid").childNodes[0].nodeValue);
//属性节点的 nodeValue 是属性的值
console.log(document.getElementById("aid").attributes[2].nodeValue);
</script>
</body>
3.nodeType：节点的类型
nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型：节点类型
元素：1
属性：2
文本：3
注释：8
文档：9
获取父节点
调用者就是节点。一个节点只有一个父节点，调用方式
console.log(document.body.parentNode)
获取所有的子节点
childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）。是W3C的亲儿子
document.body.childNodes
获取元素属性的集合
console.log(document.body.attributes.length)
DOM元素的操作
获取HTML元素
1.通过id获取HTML元素
//通过id获取元素
var a1=document.getElementById(“a1″);
//修改id为a1的内容
a1.innerText=”id为a1的文本”;
2.通过标签名获取HTML元素
//通过标签获取元素
var a3=document.getElementsByTagName(“p”);
for(var i=0;i<a3.length;i++){
a3[i].innerText=”标签p获取元素”;
}
3.通过类名获取HTML元素
//通过class获取元素
var a2=document.getElementsByClassName(“a2″);
for(var i=0;i<a2.length;i++){
a2[i].innerText=”2222”;
}
修改HTML文本
a1.innerText=”id为a1的文本”;
或
a1.innerHTML=”id为a1的文本”;
改变HTML属性、改变css样式
a1.style.color=”red”;
元素的CRUD
1.创建元素
//创建p标签
var ps=document.createElement(“p”);
//创建文本节点
var ptext=document.createTextNode(“这是创建一个新的段落”);
//向p元素追加文本节点
ps.appendChild(ptext);
//找到已有的元素
var div1=document.getElementById(“div1”);
//向已有的元素后添加新元素
div1.appendChild(ps);
//向已有的元素后添加新元素
div1.insertBefore(ps,ptext);
2.删除元素
//找到已有的元素
var div1=document.getElementById(“div1”);
//移除id为div1元素
div1.parentNode.parentNode.remove();
3.替换元素
//获取父元素
var div1s=document.getElementById(“div1”);
//创建p标签
var ps=document.createElement(“p”);
//创建文本
var texts=document.createTextNode(“这是被替换的文本”);
//p标签添加文本
ps.appendChild(texts);
//获取id为p3
var p3s=document.getElementById(“p3”);
//给父元素的子节点的p3替换
div1s.replaceChild(ps,p3s);
DOM事件
改变元素样式
<p id=”p1″ onclick=”changes(this)”>点击修改文本颜色及斜体</p>
<script>
//第一种
/* var p1=document.getElementById(“p1”);
p1.onclick=function(){
this.style.color=’red’;
this.style.fontStyle=’italic’;
} */
//第二种
function changes(obj){
obj.style.color=’blue’;
obj.style.fontStyle=’italic’;
}
</script>
EventListener监听事件
方法：addEventListener()
<div id=”div1″>
<p id=”p1″>这是文本</p>
</div>
<style>
#div1{width: 200px;height: 200px;background-color: bisque;}
#p1{text-align: center;padding-top: 50px;background-color: aqua;}
</style>
<script>
var div1=document.getElementById(“div1”);
div1.addEventListener(“click”,function(){alert(“您点击了DIV”)},true);
var p1=document.getElementById(“p1”);
p1.addEventListener(“click”,function(){alert(“您点击了文本”)},false);
</script>
发表回复