javascript总结3

来源：互联网发布：bmob后端云 java 编辑：程序博客网时间：2024/05/29 05:58

DOM 元素查询

如果需要操作 HTML 元素，必须首先找到该元素

查询节点的方式

通过 id 查询
通过层次（节点关系）查询
通过标签名称查询
通过 name 属性查询

通过 id 查询

语法:

e = document.getElementById(元素ID)

通过层次（节点关系）查询

parentNode
- 遵循文档的上下层次结构，查找单个父节点
childNodes
- 遵循文档的上下层次结构，查找多个子节点

提示: 不用使用childen属性, 这个属性是Chrome浏览器专用属性, 其他浏览器不一定支持, 这种现象就是浏览器兼容问题, 是普遍问题. 建议使用通用API实现代码, 避免兼容性问题.

根据标签名查询节点

getElementsByTagName()
- 根据指定的标签名称返回所有的元素
- 忽略文档的结构查找整个 HTML 文档中的所有元素(子孙元素)
- 如果标签名称错误，则返回长度为 0 的节点列表
返回一个节点列表（数组）

使用节点列表的 length 属性获取个数
[index]：定位具体的元素

根据 name 属性查询节点

document.getElementsByName()
- 根据标签的 name 属性的值进行查询

适合在表单中查询名字相同的选项框 (单选/复选)

添加节点

DOM API 提供了添加元素的方法;

添加元素步骤:

创建元素
- 新元素=document.createElement(元素名)
追加元素
- 父元素.appendChild(新元素)

案例:

//追加新元素var li = document.createElement('li');li.innerHTML='Andy';var ul = document.getElementById('demo');ul.appendChild(li);

插入元素步骤:

创建新元素
- 新元素=document.createElement(元素名)
插入元素
- 父元素.insertBefore(新元素, 参考位置元素)
- 在 参考位置元素 之前插入新元素

案例:

//插入新元素li = document.createElement('li');li.innerHTML='Mac';var tom=ul.getElementsByTagName('li')[0];ul.insertBefore(li, tom);

删除元素

删除元素步骤:

找到父元素
找到子元素
从父元素中删除子元素
- 父元素.removeChild(子元素)

案例:

var ul = $('demo');var li = ul.getElementsByTagName('li')[0];//删除元素ul.removeChild(li);

经典案例级联菜单

代码:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">var cities=[         ['请选择'],         ['静安','浦东','宝山'],         ['沈阳','高坎','鞍山'],          ['石家庄','保定','唐山','廊坊']];function changeCities(list){    //list = document.getElementById('province');    //得到那个项目被选定了?    var index = list.selectedIndex;    console.log(index);    //找到城市    var city = cities[index];    console.log(city);    var s=document.getElementById("city");    //清空城市列表    s.innerHTML="";     //创建城市列表    for(var i=0; i<city.length; i++){        //创建option         var opt=document.createElement('option');        //value是发送到服务器的数据,        // 不是给客户端使用的        opt.value=i;        //opt.setAttribute('value', i)        opt.innerHTML=city[i];        //添加到城市列表中        s.appendChild(opt);    }}</script></head><body>    <h1>联动菜单</h1>    省份:    <select id="province"         onchange="changeCities(this);">        <option value="0">请选择</option>        <option value='1'>上海</option>        <option value='2'>辽宁</option>        <option value='3'>河北</option>    </select>    城市:    <select id="city">        <option value='0'>请选择</option>    </select></body></html>

0 0

javascript总结3

DOM 元素查询

通过 id 查询

通过层次（节点关系）查询

根据标签名查询节点

根据 name 属性查询节点

添加节点

删除元素

经典案例 级联菜单

经典案例级联菜单