[Python web] 4. document 사용법 객체 불러오기 (Brython)

1.Brython document

document는 DOM 기본적인 것을 모두 수용하며

document.select( '객체 속성 + 객체 이름')으로 불러올수도 있다

속성 표

속성	속성기호	예제
tag	없음	div
class	.	.class_element
id	#	#id_element
tag+tag	[]	div[h1]
tag+element	기호	div.class_element

불러온 객체는 리스트 형태로 되어있어 원하는 객체를 선택해 추출해야한다

2. 실행

1. 간단한 실행 방법

3. 파일구조

Folder─┬─ index.htm
├─ style.css
└─ script ─┬─ brython.js
├─ brython.min.js
├─ brython_stdlib.min.js
└─ python.py

<index.html>

<!DOCTYPE html>
<html>
<head>
	<!-- brython 가져오기 -->
	<script type="text/javascript" src="script/brython.min.js"></script>
	<script type="text/javascript" src="script/brython_stdlib.min.js"></script>
	
	<!-- python 파일 사용하기 -->
	<script type="text/python" src="script/python.py"></script>
	
	<!-- css 파일 가져오기 -->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body onload="brython()">
	<!-- tag -->
	<div>
		<div>tag</div>
		<button type="button">tag</button>
	</div>
	
	<!-- class -->
	<div class="div_class">
		<p>class</p>
		<button type="button" class="btn_class">class</button>
	</div>
	
	<!-- id -->
	<div id="div_id">
		<p>id</p>
		<button type="button" id="btn_id">id</button>
	</div>
	
	<!-- tag + tag -->
	<div div="tag+tag">
		<div>tag + tag</div>
		<button type="button">tag + tag</button>
	</div>
	
	<!-- tag + element -->
	<div>
		<div class="div_class">div + element</div>
		<button type="button" class="btn_class">div + element</button>
	</div>
</body>
</html>

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


html {
	height:100%;
	border-style: solid ;
	border-color: white;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	padding: 30px;
	line-height: 1.6;
	overflow:hidden;
	color: white;
	font-size: 15px;
}
h1 {
	text-align: center;
	margin-bottom: 30px;
	border-bottom: 1px #ccc solid;
}

h2 {
	margin-top: 20px;
}

button {
	cursor: pointer;
	display: block;
	background: #333;
	color: #fff;
	border: 0;
	border-radius: 5px;
	padding: 10px 20px;
	margin: 20px 0;
}

input[type="text"] {
	border: 1px #ccc solid;
	width: 300px;
	padding: 4px;
	height: 35px;
	margin-top: 20px;
}

a {
	color: white;
}

ul {
	font-size: 10px;
}
.card {
	margin: 20px 0;
	border: #ccc 1px solid;
	padding: 20px;
}

.box {
	background: steelblue;
	width: 1.6em;
	height: 1.6em;
}

.brython-dialog-main {
	position:absolute;
	border-style: solid;
	border-width: thin;
	border-radius: 15px;
	background: white;
	border-color: black;
	width: 230px;
}
.brython-dialog-title {
	color: black;	
	margin: 5px 10px 10px 10px;
	border-bottom: 2px solid ;
}
.brython-dialog-close {
	color: black;
	float: right;
}
.brython-dialog-close:hover {
	cursor:pointer;
	color : gray;
	transition: 1s ease-in;
}
div.brython-dialog-panel div{
	text-align: center;
}

.brython-dialog-button {
	display: inline-block;
	vertical-align: center;
	cursor:pointer;
	
}
.butten_list{
	float:right;
	top : 10px;
	right: 10px;
	border: 1px solid;
	padding: 0px 10px 0px 10px;
	border-radius: 5px;
}

@media (max-width: 230px){
	.brython-dialog-main {
		width: 100%;
	}
}

from browser import document, console, alert, bind

''' tag '''
def btn_div(self):
    console.log(self)
    document.select('div')[0].get(selector='div')[0].textContent += ' is changed'
    
document.select('button')[0].bind('click',btn_div)

''' class '''
def btn_class(self):
    console.log(self)
    document.select('.div_class')[0].get(selector='p')[0].textContent += ' is changed'
    
document.select('.btn_class')[0].bind('click',btn_class)

''' id '''
def btn_id(self):
    console.log(self)
    document.select('#div_id')[0].get(selector='p')[0].textContent += ' is changed'

document.select('#btn_id')[0].bind('click',btn_id)

''' tag + tag'''
def btn_tag(self):
    console.log(self)
    document.select('div[div]')[0].get(selector='div')[0].textContent += ' is changed'
    
document.select('button')[3].bind('click', btn_tag)

''' tag + element'''
def btn_element(self):
    console.log(self)
    document.select('div.div_class')[1].textContent += ' is changed'
    
document.select('button')[4].bind('click',btn_element)

4. 끝

생각보다 속성을 불러오는 곳에서 리스트 형식으로 여러개가 있다는 것을 찾지 못하여 해매였다

그리하여 console.log 를 이용해 분해하여 bind() 함수가 작동할 수 있는 형태를 찾아내었고

그후로는 빠르게 진행이 되었다

궁금한 점과 질문이 있다면 밑에 뎃글을 달아주시고 아는 만큼 답변을 달아 주겠습니다

'Python Web > Brython' 카테고리의 다른 글

[Python web] 6. FileReader(), rotate(), window.sessionStorage 파일 불러오기 및 객체 속성 적용(Brython) (3)	2021.03.25
[Python web] 5. Template(), ajax() html글 객체 가져오기 (Brython) (0)	2021.03.23
[Python web] 3. 특성 (이벤트) 적용해보기(Brython) (0)	2021.03.19
[Python web] 2. Brython DOM 객체 가져오는 방법(Brython) (0)	2021.03.18
[Python web] 1. 웹 만들기 (Brython) (0)	2021.03.18

티스토리툴바