day53前端基础之JavaScript_party_2标签查找创建

BOM

节点类型：

HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：
    整个文档是一个文档节点 
    每个 HTML 标签是一个元素节点 
    包含在 HTML 元素中的文本是文本节点 
    每一个 HTML 属性是一个属性节点

节点查找

直接查找节点 （ele_xx）

1、document.getElementById(“idname”)##查找到id为idname的元素节点

2、document.getElementsByTagName(“tagname”)##查找到tagname类标签的元素节点

3、document.getElementsByName(“name”)##查找到属性为name = “name”的元素节点

4、document.getElementsByClassName(“name”)##查找到class为“name”的元素节点

 

导航节点属性（ele_xx.下面代码）

'''

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

'''

注意，js中没有办法找到所有的兄弟标签！

都是标签对象含有的属性，红色圆圈内得到是数组。

 

事件：

 

For遍历绑定事件
Var ele_li = document.getElementByclassname(item)
For ( var i =0 ;i<ele_li.length ;i++){
Ele_li[i].onlick=function(){  ###匿名函数
Console.log(alert(this.innertext))} 
This代指绑定事件的标签（onlick绑定事件）

在script里可以在给属性重新赋值不能创建新的属性，onclick是DOM提供的方法

 

 

标签的取值：

innerText是取得最里面所有层的文本信息

innerHTML是取得所有的信息包括标签信息

赋值：

innerText是赋予的全部文本信息，即使写成标签样式也是文本

innerHTML是可以赋予标签

他们的共同点是把要赋予的标签的子标签全部删除，然后在赋值。

先引入jquery.js模块

$（“.title”）找到所有class是title的标签

.click 绑定事件（支持循环绑定）

$（this）代指触发了的这个标签

Next（）.removeClass(“hide”);下一个标签去除hide样式

$（this）.parent.siblings（）.children（“.con”）.addClass（“hide”）

找到这个标签的父级标签，siblings是所有的兄弟标签（不包含自己），子标签中带有con的，去添加一个hide标签。

节点的增删改查

 

创建标签：

var ele_img=document.createElement("img");#括号内是标签的类型

ele_img.src="egon2.jpg"是给标签添加属性

此时标签创建完成

在需要插入节点的位置找到父节点：(父节点.appendChild(子节点))；

ele_outer.appendChild(ele_img)

也可以解决二级联动（查找地区）