demo1：修改页面元素

全选反选，并计算总价

<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8"><title></title><script type="text/javascript">function allCheck(all){var allChecks=document.querySelectorAll("#all_pro_div>input");console.log("checkboxNum:%d",allChecks.length);for(var i=0;i<allChecks.length;i++){allChecks[i].checked=all.checked;}}function sumPrice(){var allChecks=document.querySelectorAll("#all_pro_div>input:checked");console.log("checkboxNum:%d",allChecks.length);var sum=0;for(var i=0;i<allChecks.length;i++){sum+=parseInt(allChecks[i].value);}// var sumSpan=document.querySelector("#sum_price_span");document.querySelector("#sum_price_span").innerText=sum+"元";}</script></head><body><input type="checkbox" id="allCheck" name="all" onclick="allCheck(this);sumPrice();">全选<div id="all_pro_div"><input type="checkbox"  name="all" value="1">1<br/><input type="checkbox"  name="all" value="2">2<br/></div>总价：<span id="sum_price_span"></span></body>
</html>

demo2：增添删除页面元素

城市联动多选框

<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8"><title></title><script type="text/javascript">function addValue(){var city=[["顺义","海淀","朝阳","东城"],["石家庄","唐山","廊坊","保定"]];var left=document.querySelector("#left");var right=document.querySelector("#right");var options=left.querySelectorAll("option");var cityOptions=right.querySelectorAll("option");for(var i=0;i<cityOptions.length;i++){right.removeChild(cityOptions[i]);}console.log("optionsNum:%d",options.length);for(var i=0;i<options.length;i++){if(options[i].selected){var pv=parseInt(options[i].value);for(var j=0;j<4;j++){var newOp=document.createElement("option");newOp.innerText=city[pv][j];right.appendChild(newOp);}}}}</script></head><body><select id="left" multiple><option value="0">北京</option><option value="1">河北</option></select><input type="button" value="-->" onclick="addValue();"><select id="right" multiple></select></body>
</html>

debug过程：

选择器

整个文件则document.querySelectorAll("");

已找到上层对象可left.querySelectorAll

Id# class. 标签无

层次>，伪类：

取input的值allChecked[i].value

#all_pro_div > input:checked

InnerText为标签属性，非方法

document.querySelector("#sum_price_span").innerText=

层次选择器

E > F 子选择器

属性选择器

伪类：

CSS 伪类用于向某些选择器添加特殊的效果

锚伪类

所有CSS伪类/元素

http://www.runoob.com/css/css-pseudo-classes.html

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}               /* 未访问的链接 */

a:visited {color: #00FF00}    /* 已访问的链接 */

a:hover {color: #FF00FF}      /* 鼠标移动到链接上 */

a:active {color: #0000FF}

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。

动态创建元素

function addDiv() {

// 创建一个新的div

// createElement中传入要创建的页面元素的标签名称

var newDiv = document.createElement("div");

// 添加这个div的属性和内容

newDiv.style.border = "1px solid green" ;

newDiv.style.width = "400px";

newDiv.innerText = "新创建的div" ;

// 把创建好的div放入到某个页面元素中

// 取得all_div

var allDiv = document.querySelector("#all_div");

allDiv.appendChild(newDiv);

}

声明二维数组

var Array = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]]

打印调试信息

console.log("**:%d",**);

前端笔记1（选择器，动态增添/修改页面元素）相关推荐

jQuery修改页面元素的属性
作为一个后台开发者,在web开发的时候会常常遇到修改前台页面的属性的问题.这两天我发现jQuery的$("#id").attr("prop","值&q ...
CSS笔记二-选择器、背景相关属性、元素显示模式、CSS三大特性、chrome调试工具、PXcook使用
一.复合选择器 1.后代选择器根据HTML标签的嵌套关系,选择父元素后代中满足条件的子元素: 选择器语法:选择器1 选择器2 {css} 结果:在选择器1中所找到标签的后代(儿子.孙子.重孙子... ...
前端笔记-vue中使用router进行页面跳转及除掉url中的#
目录演示代码演示运行截图如下: 点击后,url跳转如下: 代码页面跳转的关键程序结构如下: aaa.vue <template><div>我是aaa<butt ...
js动态添加修改删除元素
事件委托:e.target 核心:1.通过事件冒泡给子元素添加事件,控制新生成的元素进行操作 2.减少DOM元素操作,只需要绑定一个父元素就可以,不用循环遍历每一个子元素进行绑定事件操作,提高程序性能 ...
selenium自动化测试中js修改页面元素的readonly属性
from time import sleepfrom selenium import webdriver from selenium.webdriver import Keys from seleni ...
【selenium学习笔记一】python + selenium定位页面元素的办法。
1.什么是Selenium,为什么web测试,大家都用它? Selenium设计初衷就是为web项目的验收测试再开发.内核使用的是javaScript语言编写,几乎支持所以能运行javaScript的 ...
JavaScript 使用js修改页面元素
博主前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住也分享一下给大家,
对Web页面元素的绝对唯一引用方法
我们知道要在Web页面中引用一个HTML元素,最简单的方法就是使用getElementById方法,或其类似的一组getElementsByXxx方法.可是这里需要注意的是,这些方法其实都不能完全绝对 ...
[前端笔记——CSS] 10.层叠与继承+选择器
[前端笔记--CSS] 10.层叠与继承+选择器 1.层叠与继承 1.1 冲突规则 1.2 继承 1.3 层叠 1.4 CSS位置的影响 2.选择器 2.1 选择器是什么? 2.2 选择器列表 2.3 ...

前端笔记1（选择器，动态增添/修改页面元素）