javascript操作元素 _javascript

获取元素方法一
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：
<script type="text/JAVAscript"> var oDiv = document.getElementById('div1');</script>....<div id="div1">这是一个div元素</div>上面的语句，如果把JavaScript写在元素的上面，就会出错，因为页面上从上往下加载执行的， javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：
第一种方法：将javascript放到页面最下边
....<div id="div1">这是一个div元素</div>....<script type="text/javascript"> var oDiv = document.getElementById('div1');</script></body>第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); }</script>....<div id="div1">这是一个div元素</div>获取元素方法二
可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。
<script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName('li'); // aLi.style.backgroundColor = 'gold'; // 出错！不能同时设置多个li alert(aLi.length); aLi[0].style.backgroundColor = 'gold'; }</script>....<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li></ul>操作元素属性获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作属性的方法
1、“.” 操作
2、“[ ]”操作
属性写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size” ，改成”style.fontSize”
通过“.”操作属性：
<script type="text/javascript"> window.onload = function(){ var oInput = document.getElementById('input1'); var oA = document.getElementById('link1'); // 读取属性值 var sValue = https://www.isolves.com/it/cxkf/yy/js/2019-09-23/oInput.value; var sType = oInput.type; var sName = oInput.name; var sLinks = oA.href; // 写(设置)属性 oA.style.color = 'red'; oA.style.fontSize = sValue; }......传智播客通过“[ ]”操作属性：
<script type="text/javascript"> window.onload = function(){ var oInput1 = document.getElementById('input1'); var oInput2 = document.getElementById('input2'); var oA = document.getElementById('link1'); // 读取属性 var sVal1 = oInput1.value; var sVal2 = oInput2.value; // 写(设置)属性 // oA.style.val1 = val2; 没反应 oA.style[sVal1] = sVal2;}</script>......<input type="text" name="setattr" id="input1" value=https://www.isolves.com/it/cxkf/yy/js/2019-09-23/"fontSize">传智播客innerHTML
innerHTML可以读取或者写入标签包裹的内容
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); //读取 var sTxt = oDiv.innerHTML; alert(sTxt); //写入 oDiv.innerHTML = '<a href=https://www.isolves.com/it/cxkf/yy/js/2019-09-23/"http://www.itcast.cn">传智播客'; }......