javascript总结3

阅读更多

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 提供了添加元素的方法;

添加元素步骤:

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

案例:

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

插入元素步骤:

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

案例:

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

删除元素

删除元素步骤:

1. 找到父元素
2. 找到子元素
3. 从父元素中删除子元素
   • 父元素.removeChild(子元素)

案例:

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

经典案例 级联菜单

代码:

    
联动菜单
    省份:
    
        请选择
        上海
        辽宁
        河北
    
    城市:
    
        请选择