pythonjs设置_python dom操作

点我

常见事件

(2)对标签值的操作

innerText

//设置文本

var oDiv=document.getElementById('box');

oDiv.innerText='哈哈哈'

innerHTML

//既可以设置文本又可以设置标签设置 set 获取 get 点语法(set方法和get方法)

oDiv.innerHTML='

嘿嘿嘿

(3) 获取标签内容值

//只获取所有(当前标签和子标签)文本内容

console.log(oDiv.innerText);//获取父标签中所有标签元素(子标签,空格,换行,文本)

console.log(oDiv.innerHTML);

(4)对表单控件value的操作

//设置value值只适应于表单控件元素

document.getElementById('user').value = 'alex';

console.log(document.getElementById('user').value);

(5)对标签的css操作(样式操作)

xxx.style.css的属性key='值'

盒子颜色的切换

var oDiv = document.getElementsByClassName('box')[0];var isRed = true;

oDiv.οnclick= function() {if(isRed) {//this 谁做的事件操作 this指向谁

this.style.backgroundColor = 'green';this.style.width = '400px';

isRed= false;

}else{this.style.backgroundColor = 'red';

isRed= true;

}

(6)对标签属性的操作

var oDiv = document.getElementsByClassName("box")[0];var oBtn = document.getElementById("btn");var isShow = true;

oBtn.οnclick= function() {if(isShow){

oDiv.id= "box1";

oDiv.title= "hhhh";

console.log(oDiv.className);//box

oDiv.className = oDiv.className+"active";

isShow= false}else{

oDiv.className= "box";

isShow= true}

}

DOM的操作(创建,追加,删除)

js中的面向对象

定时器

1. DOM的操作(创建,追加,删除)

(1)DOM节点的获取

parentNode 获取父级标签

nextElementSibling 获取下一个兄弟节点

children 获取所有的子标签

var oP = document.getElementById("wuxia");

console.log(oP.parentNode);//父级div标签下的所有内容

console.log(oP.nextElementSibling.innerText); //萧峰

console.log(oP.nextSibling.innerText); //IE浏览器

var a = oP.nextElementSibling||oP.nextSibling;

console.log(a);

console.log(oP.parentNode.childen);

(2) DOM的增删操作

创建 createElement()

//既可以创建已有的标签,还可以创建自定义的标签

var oDiv = document.createElement('div')

追加 appendChild() 父子标签操作

父.appendChild(oDiv);

删除 removeChild()

父.removeChild(子节点);

自己.parentNode.removeChild(自己)

插入insertBefore()

父.insertBefore(新的子节点,要参考的节点)

利用创建删除实现隐藏代码示例

var oBtn = document.querySelector("#btn");var oDel = document.querySelector("#del");var oFather = document.querySelector(".father");var oP = null;var oA = null;

oBtn.οnclick= function(){//创建 dom p标签

oP = document.createElement("p");

oA= document.createElement("a");//追加到父级标签中

oFather.appendChild(oP);

oFather.insertBefore(oA,oP);//设置对象属性值

oA.href = 'http://www.baidu.com';//设置值

oA.innerText="百度";

oP.innerHTML= "alex";

oP.setAttribute("class","active")

};

oDel.οnclick= function(){//如果oP对象存在就结束程序

if (!oP){return;// }else{

console.log(oFather);//将增加的p标签移出

oFather.removeChild(oP)

}

使用js模拟hover选择器

Title

padding:0;

margin:0;

}

ul{

list-style: none;

}

ul{

width: 600px;

height: 80px;

line-height: 80px;

text-align:center;

overflow:hidden;

}

ul li{float:left;

margin:010px;

width: 80px;

height: 80px;

background: darkturquoise;

color: #fff;

}

ul li.active{

background: red;

}

举头望明月

var lists = document.getElementsByTagName("li");for(var i =0;i

lists[i].οnclick= function(){//在修改当前盒子样式之前,现将所有盒子的类名置空

for(var j=0; j

lists[j].className="";

}this.className = "active"; //修改当前鼠标进入盒子的样式

}

选项卡

Title

padding:0;

margin:0;

}

ul{

list-style: none;

}

#tab{

width: 480px;

margin: 20px auto;

border: 1px solid red;

}

ul{

width:100%;

overflow: hidden;

}

ul li{float: left;

width: 160px;

height: 60px;

line-height: 60px;

text-align: center;

background-color: #cccccc;

}

ul li a{

text-decoration: none;

color:black;

}

li.active {

background-color: darkcyan;

}

display: none;

height: 200px;

text-align: center;

line-height: 200px;

background-color: darkgrey;

}

p.active{

display: block;

}

首页

新闻

图片

首页内容

新闻内容

图片内容

var lists = document.getElementsByTagName("li");var oPs = document.getElementsByTagName("P");//var i;

//i=3 变量提升会导致变量是一个全局作用域

//var 声明变量全局作用域,存在变量提升

for(var i= 0; i

lists[i].currentIndex =i;

console.dir(lists[i]);

lists[i].οnclick= function(){for(var j = 0; j

lists[j].className= "";

oPs[j].className= '';

}this.className = "active";

oPs[this.currentIndex].className = 'active'}

}

2.js中的面向对象

(1)使用Object或对象字面量创建对象

//构造函数方式创建对象

let person = newObject();

person.name= 'alex';

person.fav= function() {

console.log(this);

}//字面量方式创建使用最多

var person2 ={

name:'wusir',

age:19,

fav:function() {

alert(this.age);

}

person2.fav();

3.定时器

事件点击案例

Title

提交

确认

大海啊,全是水

functionf1(ths) {

ths.style.color= 'red';vardiv1=document.getElementById('xxx');

div1.style.color= 'yellow';

}varbtn2=document.getElementById('btn2');

btn2.οnclick= function() {this.style.color= 'blue';

}

pythonjs设置_python dom操作相关推荐

jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
03-老马jQuery教程-DOM操作(上）
jQuery DOM操作在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
Jquery基础之DOM操作
Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...
DOM操作之属性和样式操作
在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...
jQuery中DOM操作
1.DOM操作的分类 DOM操作一般分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 2.查找节点 2.1查找元素节点获取元素节点并打印它的文本内容 var $li = $(&q ...
webform（九）——JQuery基础（选择器、事件、DOM操作）
JQuery -- 一个js函数包一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选 ...
关于 DOM 操作的几个类型
DOM是Document Object Model的缩写,意思是文档对象模型,是由W3C制定的一套访问和操作XML(eXtensible Markup Language)文档的标准,即API.比如DO ...
dom操作表格示例(dom创建表格)
一.使用HTML标签创建表格: 复制代码代码如下: <tableborder="1"width="300"> <caption>人员表 ...
ihtml2document能不能根据id获取dom_回到基础：什么是DOM及DOM操作？
译者:前端小智来源:valentinog 为了保证的可读性,本文采用意译而非直译. 文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web ...

pythonjs设置_python dom操作

嘿嘿嘿

pythonjs设置_python dom操作相关推荐

最新文章

热门文章