首页 > 代码库 > Dow事件

Dow事件

2024-09-23 07:19:54   216人阅读

《栋却门得。给 哎里们 拜》对象获取元素根据。。id 通过ID获取元素
DOM查找方法
document.getElementById()
document.getElementsByTagName()
语法：document.getElementById(“id”)
功能：返回对拥有指定ID 的第一个对象的引用
返回值：DOM对象说明：id为DOM元素上id属性的值
<div class="box" id="box">元素1</div>
<script>
var box=document.getElementById("box"); // 获取id为box的这个元素
console.log(box); //返回的是box的div本身
</script>
id只能有一个，返回的是整个div本身
语法：document.getElementsByTagName(“tag”)
功能：返回一个对所有tag标签引用的集合
返回值：数组
说明：tag为要获取的标签名称
分析：通过标签名选取的元素是一个类数组对象，如果你要获取到特定的元素，那么就要像数组一样，下标从0开始算起，找到这个元素，比如：要找第三个li，就是4.
tag可以是页面中所有的a，li标签等 //输出5,并且输出所有的li以数组的形式
返回是，数组，并且有数量属性
获取到list1下的所有的li //输出3,并且输出所有li以数组的形式
<ul id="list1">
<li>前端开发</li>
<li>服务器端开发</li>
<li>UI设计</li>
</ul>
<ol>
<li>javaScript原生</li>
<li>javaScript框架</li>
</ol>
<script>
var lis=document.getElementsByTagName("li"); // 获取页面中所有的li和数量
console.log(lis.length);
var lis2=document.getElementById("list1").getElementsByTagName("li");
// 获取id为list1下的所有的li和数量
console.log(lis2.length);
</script>
设置动态样式:
语法：ele.style.styleName=styleValue
功能：设置ele元素的CSS样式说明：1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称
3、styleValue为设置的样式值
属性不能用-形式，只能用驼峰形式。如果font-weight改为fontWeight
<div class="box" id="box"> 元素1 </div>
<script>
// 设置id为box的这个元素的文字颜色,属性是减号连接的复合形式时
// 必需要转换为驼峰形式
var box=document.getElementById("box");
box.style.color=‘#f00‘;
box.style.fontWeight="bold";
</script>
设置元素样式是必须要Dom对象document
因为getElementsByTagName()取出来的是数组是需要遍历每一个元素，取出每一个元素
可以让他们的颜色都不一样
<ul id="list">
<li>前端开发</li>
<li>服务器端开发</li>
<li>UI设计</li>
<li>UI设计</li>
<li>UI设计</li>
</ul>
<script>
var lis=document.getElementById("list").getElementsByTagName("li");
for(var i=0,len=lis.length;i<len;i++){ // 遍历每一个li
lis[i].style.color=‘#00f‘;
if(i==0){
lis[i].style.backgroundColor="#ccc";
}else if(i==1){
lis[i].style.backgroundColor="#666";
}else if(i==2){
lis[i].style.backgroundColor="#999";
}else{
lis[i].style.backgroundColor="#333";
}
}
</script>
之后的li继续着样式下去。
选取DOM元素的方法
方法 语法 说明
通过ID getElementById() 返回带有指定ID的元素
通过标签名 getElementsByTagName() 返回带有指定标签名的所有元素，返回的是一个类数组对象
通过name属性 getElementsByName() 返回指定name属性值的所有子元素的集合，返回的是一个类数组对象
通过CSS类 getElementsByClassName() 返回指定class名称的元素
 
《音呐html》是一个范围
 
innerHTML
语法：ele.innerHTML
无等号=是获取开始到结束标签之间的文本和HTML内容，标签内容,
功能：返回ele元素开始和结束标签之间的HTML
语法：ele.innerHTML=”html ”
有等号=则用来设置的，加上内容或者设置成为html，lis[i].innerHTML+="程序"；
功能：设置ele元素开始和结束标签之间的HTML内容为html
for返回出li里面的所有内容
<head>
<style>
.on{border-bottom:1px solid #0f0;}
.current{background:#ccc;color:#f00;}
</style>
</head>
<body>
<div class="box" id="box">元素1</div>
<ul id="list">
<li><i>前端开发</i></li>
<li class="on"><b>服务器端开发</b></li>
<li>UI设计</li>
</ul>
<script>
var lis=document.getElementById("list").getElementsByTagName("li");
for(var i=0,len=lis.length;i<len;i++){
console.log(lis[i].innerHTML); //无获取html 里的内容
lis[i].innerHTML+=‘程序‘; //有=设置成为html内容
lis[1].className="current"; //与上样式，来设置html样式
}
console.log(document.getElementById("box").className);
//如果元素有两个以上的class属性值，那么获取这个元素的className属性是，会将它的class属性值都打印出来 //输出box,打印出class的属性，打印出类名。
</script>
</body>
上面代码设置好current的样式，然后设置给第2个li，动态的js替换掉之前的class。
给一类元素添加class属性的，无等=是获取class属性，有等号=是设置
className
语法：ele.className
功能：返回ele元素的class属性
语法：ele.className=”cls”
功能：设置ele元素的class属性为cls
<body>
<div class="news">
<p class="new1">新闻标题1</p>
<p class="new2">新闻标题2</p>
<p class="new1">新闻标题3</p>
</div>
<script>
var
div=document.getElementsByClassName("news")[0];
var new1=div.getElementsByClassName("new1");
var new2=div.getElementsByClassName("new2");
console.log(div);
console.log(new1);
console.log(new2);
</script>
</body>
输出结果：输出的是body的内容，还有[p,new1,p.new2],[p.new2]
分析：
通过CSS类选取到的元素也是一个类数组对象，也要像数组一样，下标从0开始
算起，找到数组中的某个元素。
本例中，通过getElementsByClassName("news")[0];获取到了第一个div，他的子元素P标签是在它的基础上再通过类选择器获取元素的
如果不加下标直接写var div=document.getElementsByClassName("news");的话，那么我们获
取到的是一个‘类名为news’的数组，这时控制台会提示：错误
也就是这个div是CSS‘类名为news’的数组，并不是p标签的父元素
获取HTML属性。
A直接获取法但是只能得到它有的标签属性，class以外 分割号除外，自定义标签除外。返回的是undefined未定义的，或者报错null。如Dom对象.属性（p.id) //返回text
《给的额去备t》
B语法：ele.getAttribute(“attribute”)
功能：获取ele元素的attribute属性
说明：1、ele是要操作的dom对象
2、attribute是要获取的html属性（如：id，type）
<style>
.on{border-bottom:1px solid #0f0;}
.current{background:#ccc;color:#f00;}
</style>
<body>
<p id="text" class="text" align="center" data-type="title">文本</p>
<input type="text" name="user" value="http://www.mamicode.com/user" id="user" validate="true">
<script>
var p=document.getElementById("text");
var user=document.getElementById("user"); // null
console.log(p.getAttribute("class")); //p.className //获取返回text
console.log(user.getAttribute("validate")); //返回true
p.setAttribute("data-color","red"); // 给p设置一个data-color的属性
user.setAttribute("isRead","false"); // 给input设置一个isRead的属性
p.removeAttribute("align"); // 删除p上的align属性
</script>
</body>
设置属性
语法：ele.setAttribute(“attribute”,value)
功能：在ele元素上设置属性
说明：1、ele是要操作的dom对象 //1setAttribute方法必须要有两个参数
2、attribute为要设置的属性名称 //如果value是字符串，需加引导
3、value为设置的attribute属性的值 //setAttribute()有兼容性问题
删除属性：
语法：ele.removeAttribute(“attribute”)
功能：删除ele上的attribute属性
说明：1、ele是要操作的dom对象
2、attribute是要删除的属性名称

Dow事件


联系
我们