python 之 前端开发（ DOM操作）

11.47 DOM操作

查找节点：

11.471 直接查找

document.getElementById           //根据ID获取唯一一个标签
document.getElementsByClassName   //根据class属性获取一系列标签
document.getElementsByTagName     //根据标签名获取一系列标签

11.472 间接查找

语法	含义
childNodes	获取所有的子节点，除了元素还有文本等
children	获取所有元素子节点，不包含文本
parentNode	获取父节点
previousSibling	获取上一个兄弟节点，不包含文本
previousElementSibling	获取上一个兄弟元素节点，包含文本
nextSibling	获取下一个兄弟节点，不包含文本
nextElementSibling	获取下一个兄弟元素节点，包含文本
firstChild	获取第一个子节点，不包含文本
firstElementChild	获取第一个子节点，包含文本
lastChild	获取最后一个子节点，不包含文本
lastElementChild	获取父元素最后一个元素节点，包含文本

11.473 增加节点

1、创建新节点
var divEle = document.createElement('div');
2、追加一个子节点（放到最后）
父节点.appendChild(新的子节点)；
3、插入一个子节点（插入到某个节点前）
父节点.insertBefore(新的子节点,某个节点); 
4、克隆节点
要复制的节点.cloneNode();       //括号里不带参数和带参数false：只复制节点本身，不复制子节点。
要复制的节点.cloneNode(true);   //带参数true：既复制节点本身，也复制其所有的子节点。

11.474 删除、替换节点

父节点.removeChild(要删除的子节点)；
父节点.replaceChild(新的子节点, 某个子节点); 

11.475 修改/设置节点属性

1、获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText                            //只查看所有标签内的文本                   
divEle.innerHTML                            //查看所有子标签，包括文本和子标签
2、设置文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"                //先清空节点内容，再添加文本(字符串:'
我是h1
')
divEle.innerHTML="
2
"         //先清空节点内容，可识别文本内的html标签(标签:'
我是h1
')
3、attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
4、自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

11.476 获取元素的值

适用于input、select、textarea标签
var x=document.getElementById('input')
var y=document.getElementById('select')
var z=document.getElementById('textarea')
x.value
y.value
z.value

11.477 class操作

var x=document.getElementById('div1')
​
x.classList.remove('col1')          //x.classList里删除class='col1'
x.classList.add('col1')             //x.classList里添加class='col1'
x.classList.contains('col1')        //x.classList里是否有class='col1'
x.classList.toggle('col1')          //没有就添加，返回true，有就删除，返回false

11.478 css操作

obj.style.backgroundColor="red"                         //此处设置的是行内样式
1.对于没有中横线的CSS属性一般直接使用style.属性名即可 如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可 如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

11.479 事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时执行一段JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

1、常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。
​
onfocus        元素获得焦点。               // 输入框
onblur         元素失去焦点。               //应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             //应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
​
onkeydown      某个键盘按键被按下。          //应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
​
onselect      //在文本框中的文本被选中时发生。
onsubmit      ///确认按钮被点击，使用的对象是form。

2、绑定方式

方式一：

行内绑定：直接通过div被点击来修改自身样式：

 我是div，点我 
 

通过button被点击来修改另一个div标签样式：

方式二：

直接绑定匿名函数：直接通过div被点击来修改自身样式：

来，点亮我的绿

通过button被点击来修改另一个div标签样式：

方式三：

先单独定义函数，再绑定

11.4791 定时器

定时器

11.4792 输入框聚焦

View Code

11.4793 select联动

    请选择省:


    请选择市:

View Code