DOM

最新推荐文章于 2022-10-10 17:17:14 发布

茵茵最可爱

最新推荐文章于 2022-10-10 17:17:14 发布

阅读量158

点赞数 1

本文链接：https://blog.csdn.net/qq_35651737/article/details/78350708

版权

DOM对象
DOM（Document Object Model）:文档对象模型
是标记型语言和其它语言之间的接口

获取单个元素对象，根据id查找元素对象，只能获取第一个被找到的对象
document.getElementById(标签属性id的值);

根据元素的name属性值获取元素对象集合
document.getElementsByName(标签属性name的值);//IE不支持

根据元素标签名获取元素对象集合
document.getElementsByTagName(标签名);

根据元素的class属性值获取元素对象集合
document.getElementsByClassName(标签属性class的值);

标签位置
<script>标签建议放在<head>标签内
但是由于浏览器解析html页面内容是由上向下执行的；
所以，如果使用js获取某个下方的标签时，该标签尚未加载，就会导致找不到标签的错误；
有三种方法解决此问题：
– 1、将js代码移至被获取标签的下方
– 2、在body中加上οnlοad="方法名()"
– 3、window.οnlοad=function(){//js代码}
– 解释：onload的作用是等页面加载完毕再执行

onload 事件浏览器加载文档完成后触发该事件
<script typr="text/javascript">
function getDiv{ }
//window.οnlοad=getDiv; 和body标签中的onload事件作用一样（获取方法名不能带括号）
</script>
<body οnlοad="getDiv()">
<div id="div1"></div>
</body>

获取子元素

获取第一个字元素对象：元素对象.firstChild；

获取最后一个字元素对象：元素对象.lastChild；

获取所有子元素节点对象：元素对象.childNodes；

获取指定子元素对象集合：
父元素对象.getElementsByTagName(标签名);
父元素对象.getElementsByClassName(class属性值);//获取当前元素中的子元素

注意：元素节点对象中没有...ById和...ByName
//js中节点（Node）对象和元素（Element）对象的区别：节点对象空格、换行、文本、元素

都会被转换成一个节点对象；元素对象只有HTML元素会被转换成元素对象（开始标签+内容+

结束标签）

获取元素属性值
1、元素对象.属性名//字符串只能获取原生的属性的值
2、元素对象.getAttribute（"属性名"）//返回字符串获取原生的和自定义的属性的值，只

会获取初始化属性的值
3、元素对象.getAttributeNode（"属性名"）//返回属性节点对象

获取元素文本内容
1、元素对象.innerHTML //含标签
2、元素对象.innerTEXT //不含标签。火狐浏览器不支持
3、元素对象.textContent //不含标签。IE9以前版本不支持

修改元素
修改元素内容
1 设置innerHTML属性不显示HTML标签
2 设置innerText/textContent属性，将标签显示为文本
修改元素属性
元素.属性名="值";
元素.setAttribute（"属性名"，"值"）；//文本值
元素.serAttributeNode（"属性名"，属性节点对象）;//值为节点对象

修改元素样式：元素.style.CSS属性名="值";
设置元素文本内容时
innerHTML会解析文本内容的html元素
innerTEXT textContent不会解析文本内容中的HTML元素

创建元素
创建元素节点对象：document.createElement（"标签名"）;
创建文本节点对象：document.createTextNode（"内容"）;
创建属性节点对象：document.createAttribute（"属性名名"）;
追加节点对象：document.appendChild（node）;
也可以使用元素的innerHTML属性添加HTML标签

删除元素
删除元素
1、父类元素对象.removeChild（子元素对象）
2、元素对象.remove（）；
删除属性
元素对象.removeAttribute（"属性名"）；
元素对象.removeAttributeNode（属性节点对象）

Document 对象
常用属性和方法
all 获取所有HTML元素的集合
forms 获取所有Form对象的集合
images 获取所有Image对象的集合
body 获取<body>元素的节点对象
title 获取当前文档的标题文本
getElementById() 获取第一个匹配id值的元素对象
getElementsByName() 获取所有匹配name的元素对象集合
getElementsByTagName() 获取所有匹配标签名的对象集合
createElement() 创建元素
cerateTextNode() 创建文本节点对象
cerateAttibute() 创建属性节点对象

Element对象
常用属性
childNodes 获取子节点对象的集合
firstChild 返回元素的首个子元素对象
lastChild 返回元素的最后一个子元素对象
parentNode 返回元素的父元素节点对象
previousSibling 返回相邻的前一个元素对象
nextSibling 返回相邻的后一个元素对象
id 设置或返回元素的id属性值
className 设置或返回元素的class属性值
innerHTML 设置或返回元素的内容
style 设置或返回元素的style属性
tagName 返回元素的标签名
textContent 设置或返回元素和子元的文本内容

常用方法
appendChild() 在最后追加一个子节点
hasChildNodes() 判断元素有无子节点；有：true
getElementsByTagName() 返回指定标签名的所有子元素的集合
insertBefore(新元素,指定元素) 在指定元素前插入一个子元素
removeChild() 从元素中移除子节点
replaceChild(新元素,指定子元素) 替换指定子元素（指定的必须是调用者的子元素）
hasAttribute() 判断元素有无指定元素；有：true
hasAttributes() 判断元素有无属性；有：true
getAttribute() 返回元素节点的指定属性值
getAttributeNode() 返回指定的属性节点对象
removeAttribute() 从元素中移除指定属性
removeAttributeNode() 移除指定的属性节点，并返回被移除的节点
setAttribute() 把指定属性设臵或更改为指定值
setAttributeNode() 设置指定属性节点

事件
onclick 元素被单击时触发几乎所有HTML标签
//ondblclick 元素被双击时触发几乎所有HTML标签
onfocus 元素获得焦点时触发几乎所有HTML标签
onblur 元素失去焦点时触发几乎所有HTML标签
onsubmit 提交表单时触发 <form>
onreset 重置按钮被点击时触发 <form>
onselect 文本被选中时触发 <input type="text">、<textarea>
onchange 元素内容改变时触发 <input type="text">、<select>、<textarea>
onload 元素加载完成时触发 <body>、<img>
onunload 退出页面时触发 <body>
onresize 窗口被调整大小时触发 <body>、<img>
onmousedown 鼠标按钮被按下几乎所有标签
onmousemove 鼠标被移动几乎所有标签
onmouseout 鼠标从某元素移开几乎所有标签
onmouseover 鼠标移到某元素上几乎所有标签
onmouseup 鼠标按键被松开几乎所有标签
onkeydown 按键被按下几乎所有标签
onkeypress 按键被按下并松开几乎所有标签
onkeyup 按键被松开几乎所有标签

<script type="text/javascript">
function clearText(){
var input = document.getElementById("username");
if(input.value=="请在此处输入用户名..."){
input.value="";
}
}
function resetText(input){
if(input.value==""){
input.value="请在此处输入用户名..."
}
}
</script>
<body>
用户名：<input type="text" id="username" name="username" value="请在此处输

入用户名..." style="color:#666" οnfοcus="clearText()" οnblur="resetText(this)"/>
</body>

实现省市级联
<title>二级联动一维数组</title>
<script type="text/jscript">
function forChangeCity(obj){
var beijing=["海淀","朝阳","东城","西城"];
var shanghai=["浦东","宝山","松江","虹口"];
var city=document.getElementById("cityDiv");
var str='<select id="city">';
if(obj.value==1){
for(var i=0;i<beijing.length;i++){
str +='<option value="'+i+'">'+beijing

[i]+'</option>'
}

}else if(obj.value==2){
for(var i=0;i<shanghai.length;i++){
str +='<option value="'+i+'">'+shanghai

[i]+'</option>'
}

}
str +="</sclect>";
city.innerHTML=str;
}

</script>
</head>

<body>
<select id="country" οnchange="forChangeCity(this)">
<option value="0">请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
</select>
<div id="cityDiv" style="display:inline">
<select id="city">
<option value="0">请选择</option>
</select>
</div>

</body>
</html>

<title>二级联动二维数组</title>
<script type="text/jscript">
function towChangeCity(obj){
var cityArr = [["海淀","朝阳","西城","东城"],["浦东","宝山","松

江","虹口"]];
var city = document.getElementById("cityDiv");
var str = '<select id="city">';
var index = parseInt(obj.value);
for(var i=0;i<cityArr[index].length;i++){
str += '<option value="'+i+'">'+cityArr[index]

[i]+'</option>'
}
// 等价于 str = str + "</select>";
str += "</select>";
city.innerHTML = str;
}
</script>
</head>

<body οnlοad="towChangeCity(document.getElementById('country'))">
<select id="country" οnchange="towChangeCity(this)">
<option value="0">北京</option>
<option value="1">上海</option>
</select>
<div id="cityDiv" style="display:inline">
<select id="city">
<option value="0">请选择</option>
</select>
</div>

</body>
</html>

茵茵最可爱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM

DOM对象DOM（Document Object Model）:文档对象模型是标记型语言和其它语言之间的接口获取单个元素对象，根据id查找元素对象，只能获取第一个被找到的对象document.getElementById(标签属性id的值);根据元素的name属性值获取元素对象集合document.getElementsByName(标签属性name的值);
复制链接

扫一扫