一.charAT():表示是把字符串中的每一个字母按照字符转换输出.
例:
<script type="text/javascript">
var str='i love javascript';
for(var i=0;i<str.length;i++){
// alert(str.length);//输出值为17,获取数组的长度
// alert(str[i]);//输出i
// document.write(str[i]);//输出i love javascript
var chars=str[0];
// alert(typeof chars);//输出结果string
// if(str[i]<='o'){ //在这里的判断是根据字母的大小顺序来判断输出
// document.write(str[i]);//输出结果为i loe jaaci
// }
// if(str.charAt(i)>="o"){//charAt(i):表示是把字符串中的每一个字母 按照字符转换输出
// continue;
// }
// document.write(str.charAt(i));//结果i le jaaci
alert(str.indexOf('o')); //查询字符串中或是数组中字符的索引
if(i<3){
document.write(str[i]);
}
}
二.获取页面元素的方式
1.通过js的dom方法:可以使用内置对象 document 上的 getElementById 方法来获取页面上设 置了 id 属性的元素,获取到的是一个 html 对象,然后将它赋值给一个变量.
获取页面元素那么必须将获取元素的代码块放置在事件中
如果把 javascript 写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript 去页面上获取元素 div1 的时候,元素 div1还没有加载,解决方法有两种:
(1)将 javascript 语句放到 window.onload 触发的函数里面,获取元素的语句会在页面加载完后才执行.
例:
<script type="text/javascript">
window.onload=function(){
var div=document.getElementById('div1');
// alert(div);//输出结果为[object HTMLDivElement]
div.style.width=200+'px';
div.style.height=200+'px';
div.style.background='red';
// div.style.border='5px dashed black';//两种书写格式
div.style.borderWidth=5+'px';
div.style.borderColor='red';
div.style.borderStyle='dashed';
// 获取页面中div的值(innerHTML与innerTEXT)
var divContent=div.innerHTML;//获取页面元素中的内容(包含元素中的HTML的子元素)
alert(divContent);//输出结果为 Hello JavaScript<p>爱学习</p>
// var divContent=div.innerText;//获取页面中文本内容
// alert(divContent);
}
</script>
................
<body>
<div id="div1">Hello JavaScript<p>爱学习</p></div>
</body>
innerHTML与innertext
(2):将 javascript 放到页面最下边 (写入body中)
例:
<body>
<div class="div1" id="div1">Hello JavaScript<p>爱学习</p></div>
<script type="text/javascript">
// 1,通过id来获取页面元素
// 获取页面元素,那么必须将获取元素的代码块放置到事件中
var div=document.getElementById('div1');
// alert(div); 返回的结果为: [object HTMLDIVElement]
div.style.width=200+'px';
div.style.height=200+'px';
div.style.background='red';
// div.style.border='10px dashed black';
div.style.borderColor='black';
div.style.borderWidth=10+'px';
div.style.borderStyle='dashed';
// 获取页面中div的值
// innerHTML: 获取页面元素中的内容(包含元素中的html子元素)
// var divContent =div.innerHTML;
// innerText:获取页面元素中的文本内容
// var divContent=div.innerText;
// alert(divContent);
// var divWidth=div.innerWidth;
// alert(divWidth);
div.innerHTML='<a href="#">超链接</a>学的不仅是技术'
</script>
</body>
2.通过getElementsByclassName()根据元素的class获取元素
因为getElementsByClassName()获取到的结果是一个集合,要想获取单个的元素使用索引的方式获取
例:
<script type="text/javascript">
window.onload=function(){
var div=document.getElementsByClassName('div1')[0];
// alert(div);//输出结果为undefined
div.style.width=200+'px';
div.style.height=200+'px';
div.style.background='green';
}
</script>
3.通过getElementsByTagname():根据元素标签名称获取元素
例:
<script type="text/javascript">
window.onload=function(){
var div=document.getElementsByTagName('div')[0];
div.style.width=200+'px';
div.style.height=200+'px';
div.style.background='green';
var divcontent=div.innerText;
alert(divcontent);
}
</script>