dom选择元素的方法类操作

小白11111
249 阅读1分钟

<document></document>代表整个文档

html是document文档里面的根标签

第一板块

<body>

<div id="only" class="cname" name="abc">111</div>
<div>22</div>
<div>
    33<p>huahuahuahua</p>
</div>
<div>
      <span>
          <strong class="demo">999</strong>
      </span>
    </div>
<p class="first"></p>
<input name = "abc">

<script type="text/javascript">

从dom开始 一切系统生成的成组的方式基本上都是类数组[.] 类数组和数组的区别

1）拥有length属性，其它属性（索引）为非负整数（对象中的索引会被当做字符串来处理）；

2）不具有数组所具有的方法；

javascript中常见的类数组有 arguments对象和 DOM方法的返回结果。

name的根本含义：能提交数据的组件名

一、对节点的增删改查

1.查

(1)查看元素节点(和css查找html里面的元素差不多，只不过这是写代码)

例

var div = document.getElementsByTsgName("div")[0];//div在js的展现形式

.)document代表整个文档

1)通过ID选取元素.getElementById（）//id在IE8以下的浏览器不区分大小写，出现频率最少，代码规范，一个页面只能出现一次左右
var div = document.getElementById("only")//-在id里面找元素，id只有一个，所以element单数
2)通过标签名选取元素.getElementsByTagName() 常用//-标签名，通过标签名选择eg:获取页面所有div
 var div = document.getElementsByTagName("div")[0];
3)通过CSS类选取元素.getElementsByClassName //-类名，兼容性不好IE8及以下的浏览器没有
4)通过名称name选取元素.getElementsByName//不常用
 var div =document.getElementsByName("abc")[0];
5)通过CSS选择器选取元素-不常用

document.querySelector(); document.querySelectorAll();

例子 拿第2个div

 var div = document.getElementsByTagName("div");//控制台div[1];

例子 拿div里面的p标签两种都可以

 var p = document.getElementsByTagName("p")[0];
 var p = document.getElementsByClassName("first")[0];

例子

 var strong = document.querySelector("div>span strong.demo");//选一个
 var strong1 = document.querySelectorAll("div>span strong.demo");//选一组
 缺点:选出来的元素不是实时的,所以不常用

</script>

</body>

</html>

avatar
文章
阅读
粉丝